Browse documentation
Responsive design
Adapt a page for desktop, tablet, and mobile while keeping content readable and controls usable.
Where to find it
- Editor
- Canvas toolbar
- Desktop / Tablet / Mobile
In this guide
A layout that fits smaller screens, with intentional breakpoint overrides and no accidental horizontal overflow.
Before you start: Open a page in Design mode. Pick a representative page with a heading, navigation, and a multi-column section.
Switch the viewport
The device buttons sit above the canvas. The toolbar displays the active breakpoint and width. This is separate from the canvas zoom percentage.
- 1Mobile breakpoint. Confirm the active device before editing.
- 2Style controls. Review the selected layer at this breakpoint.
- 1
Establish the desktop layout
Choose Desktop. Set the main container layout, widths, padding, and type scale before adding smaller-screen adjustments.
- 2
Inspect tablet and mobile
Choose Tablet, then Mobile. Check the device label before editing. A breakpoint can also be selected from the Navigator tree.
You should see: The canvas frame and device label change to the selected breakpoint.
- 3
Make a focused override
Select the overflowing section or element. Adjust its Layout, Size, or Spacing in Style for the active breakpoint. Check desktop again after the edit.
Fix a cramped or overflowing section
Work from the outside in. A child can overflow because its parent has a fixed width, restrictive sizing, or too much padding.
| Symptom | What to change |
|---|---|
| Cards are squeezed together | Select the parent layout and reduce columns or change its direction for the smaller breakpoint. |
| The page scrolls sideways | Check fixed widths, min/max sizes, offsets, and large side margins. Use Fill or relative widths where appropriate. |
| A heading takes too many lines | Adjust mobile font size, line height, and the text container width together. |
| A photo loses its subject | Check its container dimensions, fit, and position before changing the source image. |
| Desktop unexpectedly changed | Confirm the active breakpoint and selected layer; undo the last edit and reapply it in the intended scope. |
Test the experience
Open Preview to test actual navigation and interactions. A narrow canvas alone does not verify that a menu, form, or hover effect is usable.
Before you move on
- Read the whole page at all three device sizes.
- Check links and buttons with long labels.
- Verify menus and forms without relying on hover.
- Make sure no heading, image, or section causes sideways scrolling.
- Test the same page on a real phone after publishing staging or production.
Screenshots use a local sample workspace.