Editor X: About Stack

Stacking is a helpful tool in responsive design – without it, elements placed above and below each other could overlap on smaller screens. When you stack elements, it puts them inside a flex container with margins you can control. 

Responsive websites often contain elements that resize and change position depending on screen size. This can cause them to overlap, or the spacing between them might change on smaller viewports. 

Stack puts your elements in a container that automatically adjusts to different screen sizes, so you can maintain a responsive layout. 

This is an example of what happens to elements that ARE NOT stacked when the screen resizes:

Stacking creates a flex container around your elements, which ensures that they always stay in the right spacing and order. The container is transparent by default, but you can design it to match your style, setting the fill color, borders, corners and shadow. 

Elements in a Stack are separated by vertical margins. To see the strips indicating the current margins, hover over or select the Stack. Double-click on elements inside the Stack and move them around to change the spacing between them.  

Another option is making all margins equal in height from the Inspector panel, entering a value (px or %) next to Item spacing.