Home › Updates


Displaying the left sidebar content below the main column on mobile

 June 28, 2017
by Flavio Mester

Let’s say you have a page with a left sidebar like this one:

Computer view
Computer view of a page with a left sidebar

Our system uses responsive design, and by default will place the left sidebar content before/above the main content area when the page is viewed on mobile or tablets in vertical/portrait mode. That’s adequate in most situations. However, in the case above you will probably want to override this behaviour, because on mobile those quotes should appear after/below the main content area, rather than before it.

You can now change that behaviour for specific pages simply by editing the Page Properties of the page and switching the Page Template in the Special tab from Default to Left sidebar after main on mobile:

 Page Properties
The Page Template setting

As the name implies, this template setting will display the left sidebar content after the main content when the page is viewed on mobile (and also on tablets in portrait/vertical mode.) Computers or tablets in portrait mode will not be affected. So in this example, the mobile view would be similar to this:

Mobile preview

As you scroll down, you will then see the left sidebar content:

Left sidebar on mobile


Flavio Mester

Flavio Mester is a graphic designer as well as a systems analyst (in a distant life he was an architect). A founding partner of Your Web Department, he's responsible for the design and development of all the YWD website management platform interfaces.
Google+ | Twitter | LinkedIn




Top of page