Flexible Responsive Layouts using CSS in Builder

The default responsive behavior of browsers is to move content below existing content when the viewport is narrowing down and there is not enough space to hold both. This means that a block of content with a left sidebar, the left sidebar will always sit on top of the content block, since it will be displayed first. The css code samples in this article show a workaround, for example by adding certain content in two modules (or widgets), and use the stylesheets to display either one, or the other, or both.

The Builder layout has a content module with two sidebars (one left and one right), and two widget modules, one at the top (Widget Bar Top, with three widget areas) and one at the bottom (Widget Bar Bottom, also with three widget areas).

Note, I’ve chopped this article up in small chunks, so that most of the entire page will remain visible, so click the page numbers.

Leave a Reply