Menu
The editor
Preview different screen sizes
How to see your page at several screen widths side by side, set a custom width, and zoom.
Breakpoints mode shows the current page at more than one screen width at once, so you can check how it looks on a phone and a laptop together.
- 01
Switch to Breakpoints
In the top bar, click Breakpoints. The canvas shows your page in several frames, side by side. Mobile and Laptop are shown at first.
- 02
Choose which sizes to show
Use the device buttons next to the mode switch. Each one turns a size on or off. You can show several at once.
- 03
Add a custom width (optional)
Click the arrows button (Custom breakpoint width) and type a width in pixels, between 200 and 3840. Turn the button off to remove it.
- 04
Zoom
Use the minus and plus buttons to zoom out or in, from 25% to 200%. Click the percentage to go back to 100%. You can also pinch on a trackpad, or hold
Cmd/Ctrland scroll.
The sizes available are:
| Button | Width |
|---|---|
| Mobile | 375 px |
| Tablet | 768 px |
| Laptop | 1024 px |
| Desktop | 1440 px |
| Wide | 1920 px |
You can select and edit in any frame, just like in Edit mode.
To leave, click Edit in the top bar. Pressing Esc also returns to Edit once no panel is open.