Page Layouts on Mobile
When you build a page using the 3 | 6 | 3 layout, the tertiary area (the narrow column on the left when shown on a desktop) behaves differently on mobile depending on what you put in it.
If the tertiary area contains “In this page” navigation
Section titled “If the tertiary area contains “In this page” navigation”The tertiary area is hidden from the page on mobile. A blue Contents button appears pinned to the bottom of the screen. Tapping it slides the navigation up from the bottom as a drawer.
This keeps the in-page navigation easy to reach without it taking up space at the top of every page.
If the tertiary area contains anything else
Section titled “If the tertiary area contains anything else”The area still shows on mobile, but it stacks below the main content rather than above it. So the order on mobile is:
- Primary (the main content)
- Secondary (the right column on desktop)
- Tertiary (the left column on desktop)
This means a testimonial or supporting note in the tertiary area won’t push the main content down the page on a phone.
You don’t need to do anything
Section titled “You don’t need to do anything”Both behaviours are automatic. You don’t need to flip a switch or pick a different layout. Just place your blocks in whichever area you want them to live on desktop, and the mobile presentation adjusts itself.
At tablet size and above
Section titled “At tablet size and above”The layout reverts to its normal three-column shape at tablet width and above. The mobile-specific behaviour only applies on phones.