The Stack

This is one of the most frequently used responsive action. The reason for that is simple, at small screens there is little room for content to be displayed next to each other. Eventually many of the content elements will need to be positioned, stacked, on top of each other. This will reduce the page width and increase the page length.

In the example below there are three elements, neatly placed next to each other. When the page width decreases, the elements first shrink. This starts when the width falls below 1000px. Then, at 850px, element 3 stacks below the other elements. Now each element has more room to display its contents. At 525px the elements 1 and 2 stack as well.

Demo 1: Grab the slider on the right to see how The Stack works in practice.

 

 

How stacking works: Most of the responsive frameworks use span classes that apply a column width to an element. Different widths can be applied depending on the width of the display (device). When elements are instructed to collectively take up more width than the available horizontal space, the elements that don't fit are pushed down and stack below the elements that still were able to find a spot.

In Responsive Layout Maker this is simply a matter of choosing the desired span widths from a drop down until the layout is 100% satisfactory at every possible display width.

Some Stack Variations

In the above example the width of the three elements stays within a certain range. Most of the time stacking is easier to do with an even number of elements, it keeps the layout more balanced. However, there are variations that can create slightly different effects.

In this case the single element (number 3) could have been centered for example. Stretching the element across the full width of the page is another possibility. Both variations are displayed below.

Demo 2: Stack variations.

 

The Reverse Stack

Sometimes there's a relationship between two elements on the left, and two on the right, positioned on top of each other. For example an image and a text block. The images (orange in the example below) are a little wider then the text blocks, so at smaller widths room can be created by positioning the text next to the image.

The stacked position of the elements is reversed, the text blocks are pulled up. At really small screen sizes the solution remains the same, both the text and image take up the full width for maximum usability. Using “Push & Pull” the position of element 2 and 4 could also be altered, this would make the layout a bit more playful.

Demo 3: The Reverse Stack.

 

The Stack is one of the most useful responsive actions. In combination with other layout rules a number of, sometimes subtle, variations can be created.

If you're interested in the full (non-embeded) demo of the above, you can go here to view it (and inspect the code if you like).

 

Missing some settings?

This is because Responsive Layout Maker Pro was used for the creation of this article. One or more of the settings used here might not be available in Responsive Layout Maker. For the most part however, you can continue through the article adjusting the settings that are available to you.