Margins

Responsive margins & padding

Stacks Image 1798

Margins stack

The Margins stack lets you set both responsive margins and padding for just about any element on your Stacks page. You can fine tune the Margins stack’s settings to adjust your margin and padding settings at each of the three break points.
This allows for dynamic layouts that adjust depending on your visitor's device or their browser width. You can use a general margin or padding or use our detailed settings to refine things to your liking. Watch our tutorial video for the Margins stack to see it in action and get a feel for how it operates. Below we’ve setup various items with different margins (and / or padding) that adjusts for different browser widths. Adjust your browser’s width to see these margins contract and grow accordingly.

Tutorial

Samples

Stacks Image 1839

Column One

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Stacks Image 1853

Column Two

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

An Important Headline

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

Column One

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, massa aliquet.

Column Two

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.