Making your site look right on phones and tablets (Responsive Overrides)

Your desktop layout is the starting point (the "base"). When you switch the canvas to Tablet or Mobile view, any change you make there only affects that screen size — your desktop layout stays exactly as you built it.

Where to find it

Click Website in the left sidebar, open the page you're editing, and use the device buttons in the top bar. They are small icons with the tooltips Preview at wide desktop (1920px), Preview at MacBook Pro 14 inch (1512px), Preview at iPad Pro 11 inch (834px) and Preview at iPhone 16 Pro (402px).

The device toggle in the Site Builder top bar switching between desktop, tablet and mobile

How it works

• Desktop (the base): what you build first. Everything else starts from this.
• Tablet override: edits you make while viewing the iPad preview apply only on tablet-sized screens. While you do, the section's settings show a banner, "Editing tablet only".
• Mobile override: edits you make while viewing the iPhone preview apply only on phone-sized screens, with the banner "Editing mobile only".
• On the tablet and phone previews you select sections, you don't drag them. The page is shown as a preview. Click or tap a section to change its settings at that size. To move or resize sections, switch back to a desktop size.
• Screen size ranges: phones are narrower than 640 pixels wide, tablets are 640 pixels and up, and desktop is 1024 pixels and up. (There is also a "wide" tier for very large screens, 1536 pixels and up, which inherits from desktop unless you override it.)
• Tablet and mobile overrides are independent — changing something on mobile does not affect tablet, and vice versa.
• If you don't set a position for a widget on mobile, it automatically stacks full-width so your page doesn't look squeezed.

Example

You build your Hero Banner with a large 40px headline on desktop. On a phone, that headline might wrap awkwardly, so you switch to Mobile view and shrink it to 24px — your desktop version is untouched.

Good to know

• Always build your desktop layout first — it's the base every other screen size starts from.
• If a widget looks wrong only on phones, check the Mobile view specifically; a fix made on Desktop or Tablet won't reach it.
• This works alongside your site-wide theme — see Setting your site-wide colors, fonts and spacing.