Phones, tablets and screen sizes

Switch the page between desktop, tablet and phone with the icons in the top bar, try any width on the ruler, and keep a phone view beside the page while you work.

Your site adapts to every screen. In the editor you can see and fix each size without breaking the others.

Switch the screen size

The icons in the middle of the top bar switch the page between your site's screen sizes: large desktop, Desktop, Laptop, Tablet, Mobile and Portrait. Hover an icon to see its range, for example "Tablet · 991px and below". The number keys 1–4 switch too.

A dot in the corner of an icon means the selected element has its own style at that size.

Try any width

Click the width shown in the bar, like 1442 px, to open a ruler from 320 to 1600 px. Drag it, or type an exact width. The ruler snaps to your site's breakpoints. There's no slider in the bar, so the width never changes by accident.

+ adds another standard size, or opens Breakpoint widths… to change where your site switches between layouts.

Side by side

Side by side puts a small phone view, 390 px wide, next to the page. Select something in either view and it's selected in both. Agent changes show in both too, so you see a new section on a phone before you keep it.

Changes per screen size

What you change in Design is saved for the screen size you're looking at:

• Fix the layout on Tablet, and the desktop stays as it was. Phones follow the tablet fix unless they have their own value.
• Change something on Desktop, and every other size follows unless it has its own value.

Text, images and links are the same on every size. To hide something only on phones, select it and use Hide on Mobile in Design. The label tells you how many it affects first, for example "Hide all 6 on Mobile".