Responsive design
A page is read on phone screens, tablets and desktop monitors. Responsive design means one page adapts to each of those widths rather than you building and maintaining a separate version for each. The builder previews your content at three widths and lets you set different values at each one.
Device preview modes
Column widths per device
Column width runs on a 12-unit grid, so a column set to 6 is half the section and one set to 4 is a third. Width takes a separate value at each device width, which is what lets one row of columns change shape between a desktop and a phone.
To set a width for one device, select the column and click the device icon beside the width field, then pick the breakpoint. A value you set on desktop applies to tablet and mobile until you set a different one there, so you only touch the breakpoints that need to differ.
Responsive fields
Margin, padding, border radius and width all carry a device icon. Any field with that icon takes a separate value per breakpoint.
Hiding blocks per device
Hiding an element on a narrow screen is sometimes a better answer than shrinking it. A large decorative image can come off the phone layout so the message beside it keeps the screen. Every block, column and section carries visibility controls, in the Advanced styles panel under Responsive, with a separate toggle for desktop, tablet and mobile.
Visibility toggles
One toggle per breakpoint. Turn a block off at the widths where it gets in the way and leave it on at the rest.
Testing your pages across devices
Common responsive patterns
Mobile-first habits
Troubleshooting responsive design
Check the Responsive visibility toggles for that block in the Advanced styles panel. If the block is set to visible there, check the column and the section holding it, because hiding a container hides everything inside it.
Switch to the breakpoint where it overlaps, then reduce the block's width, margin or padding at that breakpoint. The desktop layout keeps the values it already has.
Switch to mobile mode and read the column width. A column that still shows 6/12 is sharing the row with its neighbour. Set it to 12/12 and it takes the full width on its own line.