Preview and Responsive
Navigate the design canvas and check desktop, tablet, phone, and custom-width page previews.
The canvas is for editing and comparing pages. Preview is for checking one page at a realistic viewport width. Changing canvas zoom does not change the website's responsive breakpoint.
At a Glance
| View or control | What it changes |
|---|---|
| Canvas pan and zoom | Your view of the design workspace |
| Desktop view | Desktop page presentation |
| Tablet view | 768 px device preset |
| Phone view | 390 px device preset |
| Page Preview | Opens that page in the full preview view |
| Preview resize handles | Tests custom widths between device presets |
Navigate the Canvas
Pan on empty canvas space to move around the workspace. Use the zoom controls or modifier-scroll to zoom. The canvas listens for Ctrl or Cmd during wheel zoom.
Use the fit control when you lose track of the pages, and use the page headers to identify the correct page. Zoom out to compare page structure, then zoom in to inspect copy and assets.
The canvas is an editing surface. Links, forms, carousels, hover states, and other interactive behavior should be checked in preview rather than treated as live behavior on the canvas.
Canvas Device Controls
The canvas toolbar provides desktop, tablet, and phone controls. The tablet control is labeled Tablet View (768px) and the phone control Phone View (390px). Desktop uses Desktop View (Full Screen).
These change the page presentation. Zoom controls only make that presentation larger or smaller on your monitor. A 390 px phone view remains a phone layout even when zoomed out.
Open a Page Preview
Choose the page
Open Preview
Check devices
Return to editing
| Preview preset | Width |
|---|---|
| Desktop | 1440 px |
| Tablet | 768 px |
| Phone | 390 px |
The full preview also has edge resize handles labeled Resize from the left edge and Resize from the right edge. Drag them to check a width between presets. A custom width is useful for catching awkward wrapping that a single phone preset misses.
A Responsive Review Checklist
- Check whether the heading wraps naturally rather than leaving one short word on a line.
- Make sure buttons fit and remain readable.
- Review image crop and background contrast at phone width.
- Check whether columns stack in a useful reading order.
- Confirm the vertical rhythm is not excessive on a narrow screen.
- Test links and supported interactive behavior in preview.
What Preview Does Not Do
Preview is not publishing, exporting, or handing a public website to a client. Use the Publish Panel when you are ready for those workflows. Do not treat an internal page preview as a promised public share link.
There is no separate per-device copy editor described here. Use the site's responsive typography and spacing controls, then confirm the resulting layout at different widths.