Make your layout work on phones
Your pages adapt to phones and tablets by themselves: columns sit side by side on wide screens and stack on small ones. This page shows you how to take control. You set a column layout per screen size, mirror the order on wide screens and show elements on some devices only. The example turns a row of four columns into two by two on tablets.
Before you start
- A row with four equal columns on the page; see Rows and columns.
Choose a layout per screen size
- Hover the row and click the grid icon in its control bar. The layout dialog opens with a Medium devices (≥ 768px) panel.
- Click Add screen size. A second panel opens, set to Extra small (< 576px).
- In that panel's dropdown, choose Small devices (≥ 576px).
- Click Custom Layout, type
1/2 + 1/2 + 1/2 + 1/2and click Save. - Click Save on the toolbar.
Four halves keep all four columns and put two on each line. The tile with two equal columns would cut the row to two columns on every screen size.
What you see
On a desktop the four columns still sit in one line. Narrow the browser window below 768 pixels and they wrap two by two. Below 576 pixels they stack, one per line, in the order you see in the editor.
A layout applies from its screen size upwards, until a larger screen size has its own layout. Every new row starts with one layout for Medium devices (≥ 768px), so its columns stack on phones and small tablets. Remove screen size in a panel deletes that layout again.
Mirror the order on wide screens
Open the row's More menu, choose Settings and switch on Mirror row. From 768 pixels up, the columns show in reverse order; on smaller screens they stack in editor order.
Use it for alternating rows of picture and text. Put the picture first in the editor, so phones show it above the text, and mirror every second row so desktops show the picture on the right.
Show or hide an element per screen size
- Open the element's More menu and choose Settings.
- Under HTML classes, pick a chip from the Responsive Visibility group, for example Hidden on extra small devices, phones (<576px).
- Click Save.
Each Hidden on chip hides the element on one screen size only. Each Visible on chip shows it on that one size and hides it everywhere else.
Screen sizes
| Label in the layout dialog | Screen width |
|---|---|
| Extra small (< 576px) | Phones in portrait |
| Small devices (≥ 576px) | Large phones, small tablets |
| Medium devices (≥ 768px) | Tablets |
| Large devices (≥ 992px) | Laptops |
| Extra large (≥ 1200px) | Desktops |
| Extra extra large (≥ 1400px) | Large desktops |
A Positioned layers element has its own Responsive toggle, off by default. Switch it on to scale the canvas height and its text with the window width, so the composition keeps its proportions.
If you don't see the change
- Columns still stack on a tablet. The row has no layout for that screen size, so the columns stack below 768 pixels. Open the row's grid icon, click Add screen size and choose Small devices (≥ 576px).
- An element disappeared on every screen size. It carries two Visible on chips, and each hides it where the other shows it. Keep one, or use Hidden on chips, one per size to hide.
- Mirror row does nothing on a phone. Mirror row works from 768 pixels up. To change the order on phones, move the columns in the editor instead.
What's next?
- Rows and columns: build the rows you make responsive here.
- Edit a page on your phone or tablet: check and fix pages on a small screen.
- Run a section edge to edge: decide how wide your content runs.