Use the screen-size buttons in the middle of the top bar to switch between Ultrawide, Desktop, Tablet and Mobile. Whatever you change is saved for the size you're viewing, so you can give phones bigger text or less padding without touching the desktop design.
How to change something for phones only
- Click Mobile in the top bar.
- Select the element and change the setting in its Design panel. A small phone icon next to the setting shows it's now set for Mobile.
- Switch back to Desktop to check it hasn't changed there.
Canvas sizes vs. the live site
The editor draws each size at one fixed width, scaled to fit your screen:
- Ultrawide: 2560 px wide
- Desktop: 1440 px wide
- Tablet: 768 px wide
- Mobile: 390 px wide
On the live site, each size covers a range of screen widths:
- Mobile: screens up to 767 px (phones)
- Tablet: 768 to 1023 px (tablets, and phones turned sideways)
- Desktop: 1024 to 1919 px (laptops and most monitors)
- Ultrawide: 1920 px and wider (large monitors)
So a 1280 px laptop gets your Desktop design, laid out narrower than the 1440 px canvas. Use Preview at your real window width to check it. A 2560 px canvas is a big monitor, not a typical laptop.
How settings carry over
Desktop is the starting point.
- Tablet uses the Desktop settings until you change something while viewing Tablet.
- Mobile uses the Tablet settings (so, in turn, Desktop) until you change it on Mobile. Exception: a section's, column's or container's own layout settings (padding, margin, gap, alignment, width, max width, height) fall back to Desktop on Mobile, not Tablet, and the indicator says so.
- Ultrawide uses the Desktop settings until you change it on Ultrawide.
So design on Desktop first, then switch to Tablet and Mobile and fix only what needs to differ. A change made on Mobile never affects Desktop.
In the design panel, a small icon next to a setting shows where it comes from. Hover over it: Inherited from Desktop means you haven't changed it at this size. A changed setting says Overridden on Mobile. Click to reset to Desktop. (or the size it would fall back to). Click the icon to reset it. A setting with no icon on Tablet or Mobile is shared by every size; for example, a section's background is the same on all sizes. The toolbar Alignment menu says All screen sizes for those.
Resize handles per size
Dragging the resize handles of an Image, Button, Spacer, Video, HTML Embed or Divider changes only the size you're viewing. Resize a button on Mobile, and Desktop keeps its width. Each drag is one undo step.
Hide or show per device
Hiding is set separately for each screen size and isn't passed down:
- Right-click > Hide From > All Screen Sizes, Ultrawide, Desktop, Tablet or Mobile. A tick shows where it's hidden; choose it again to show it.
- Or in Layers, click the eye (Hide on this device) while viewing that size.
- Pages can also be hidden from the navigation per device: Pages > a page's ⋯ menu > Hide in nav. See Pages panel.
Text sizes per device
In Theme > Text, each style (Default, Paragraph, Heading 1–6) has a font size plus a Tablet size and a Mobile size. When these are left alone they show "Same as desktop" and "Same as tablet". Theme spacing has its own Desktop, Tablet and Mobile buttons in Theme > Width & Spacing.
Examples
- A big desktop headline that fits on phones: a 72 px Heading 1 on Desktop, set Mobile size to 36 px in Theme > Text.
- A hero picture that's too tall on phones: switch to Mobile, select the section and lower its height. Desktop is untouched.
- A long table that's hard to read on phones: right-click it > Hide From > Mobile, and add a short list in its place, hidden from Desktop, Tablet and Ultrawide.
- Extra breathing room on big monitors: switch to Ultrawide and raise a section's padding.
Limits and what it can't do
- Four sizes only. You can't add your own breakpoints or change the widths.
- Backgrounds (color, gradient, picture, video), shape divider widths and many content settings are the same on every size.
- The header has its own Desktop, Tablet and Mobile layouts, and Ultrawide uses the Desktop header. See Header, footer and navigation.
- Theme text sizes and theme spacing have no Ultrawide value; Ultrawide uses Desktop.
Good to know
- Advanced Tabs show their tabs on top on phones.
- Use Preview to check each size the way visitors see it. On a computer, Preview's Desktop view uses your real window width.
Who can use it
Anyone who can edit the site. Client people change only what their permissions allow; per-size design changes need the Editor permission.
Troubleshooting
- "I changed something on Mobile and Desktop changed too": that setting is shared by every size (it has no size icon). Most layout, size, spacing and text settings are per size; backgrounds aren't.
- "My Tablet change didn't show on Mobile": for a section's, column's or container's own layout (padding, gap, width and so on), Mobile falls back to Desktop, not Tablet. Set it on Mobile too.
- "The site looks different on my laptop": a laptop between 1024 and 1919 px uses the Desktop design at its own width. Check it in Preview.
- "An element vanished": it's hidden on this size. Find it in Layers while viewing that size and click its eye (Show on this device).
- "I want to undo all my Mobile changes on one setting": click the size icon next to it to reset it to the wider size.