Use the breakpoint canvas to see all breakpoints and make precise, responsive changes.
Checking a responsive design used to mean flipping through breakpoints one at a time, holding each version in your head as you compare. Expand canvas puts every breakpoint on the same canvas, so you can watch your changes cascade across breakpoints as you make them, or make targeted edits on smaller widths. When you're ready to dig into a single breakpoint, Focus canvas brings you back to one frame at a time.
Switch between expand canvas or focus canvas
Expand canvas: In the canvas bar, click the Expand canvas icon to see all of your site's breakpoint frames on the same canvas. Expand canvas is not available to reviewers or in preview or comment mode.
Focus canvas: Click the Focus canvas icon in the canvas bar or above a breakpoint frame to fill the canvas with one frame. You'll switch to focus canvas automatically if you open Interactions with GSAP, click goals, Analyze mode, or preview and comment mode.
Good to know
Your preference to view the cavas expanded or focused carries over the next time you open the site.
Select and edit breakpoint frames
With expand canvas open, select a frame from the Navigator to make it your active frame. You can also select a frame directly on the canvas by clicking into it.
As you edit your active frame, text, content, and style changes apply to that frame's breakpoint and cascade to the other breakpoints the same way they do outside expand canvas.
Pan and zoom around the canvas
- Pan — hold Spacebar and drag, or use a middle mouse drag
- Zoom — hold Command (Mac) or Alt (Win) and scroll, or hold those keys and tap +/-
- Reset view — press Shift + 2 to return to the default zoom level
- Fit to view — zoom to fit all visible frames on your screen
You can also use the Zoom menu in the canvas bar to zoom, reset view, or fit to view.
Add large breakpoint frames
You can add a larger breakpoint (e.g., 1280px, 1440px, or 1920px) from the Navigator. If you do so, note that these larger breakpoints can't be removed later.
- Click the Add large breakpoints icon
- Choose a breakpoint to add
- Click Create
Hide or show breakpoint frames
You can hide or show breakpoint frames using the Show/Hide icon above a frame or in the Navigator.
The browser loads a version of the page for each breakpoint frame you're showing. For more complex site pages, some breakpoint frames will be hidden by default to keep the canvas performance responsive. Revealing a hidden frame's contents in these cases can affect performance on larger pages.
Limitations to keep in mind
- Frame height — isn't adjustable, only frame width
- Custom code — doesn't load inside expanded frames
- Ruler — isn't supported for the expand canvas view