Most editing happens on the desktop grid, and it was easy to leave the mobile view behind — moving or adding blocks could quietly create overlaps or gaps on small screens. Auto Layout for Mobile keeps the two in step:
- Mobile stays laid out automatically. With Auto Layout on, every time you move, resize, or add a block on the desktop grid in the editor, the section's mobile layout is reflowed to match — stacking blocks in reading order, sizing them to the mobile grid, and keeping images at their natural proportions.
- On by default for new sections and templates. Sections added from the template library, and every page created from a site template, start with Auto Layout switched on, so new pages look right on phones without any extra work. Existing sections are untouched.
- Take over whenever you like. Switch to the mobile preview and move or resize any block, and Auto Layout steps aside for that section — your hand-made mobile layout is never overridden. You can also toggle it with the spark button next to the section controls in the mobile preview, or with Cmd/Ctrl+Shift+F; turning it on reflows the section's mobile layout immediately.
For more on working with the grid and mobile previews, see Adjusting your layout in Guidelines.