Make your page look right on mobile
Check and fix the phone and tablet layouts before you publish.
-
Switch device
Use the Desktop / Tablet / Mobile buttons in the top bar. The canvas re-renders at that width so you see the real breakpoints, not a guess.
-
Look for the usual suspects
Long unbroken words, wide tables and multi-column rows are what break on phones. Anything that shows a horizontal scrollbar needs attention.
-
Fix with the style panel
Reduce font sizes, stack columns, or hide decorative elements on small screens using the responsive controls on the block.
-
Full-width check
Scroll sideways at mobile width: if the page moves, something is overflowing. Fix that before publishing.
Good to know
- Most clients check the site on a phone first. Design mobile-first when you can.
- Zoom out (Ctrl+-) to see more of the page while checking the mobile layout.
Related guides
Shortcuts you may need
| Ctrl + S | Save the page |
| Ctrl + Z | Undo |
| Ctrl + Shift + Z | Redo |
| Ctrl + C / V | Copy / paste selected blocks |
| Ctrl + D | Duplicate the selected block |
| Ctrl + A | Select all blocks |
| Ctrl + = / - | Zoom in / out |
| Ctrl + 0 | Reset zoom to 100% |
| Delete / Backspace | Delete the selected block |
| Space + drag | Pan the canvas |
| Ctrl + scroll | Zoom the canvas |
| Ctrl + click | Select several blocks |
Did this solve it?
If not, the community and our support team are one click away.