Shoppers visit your storefront on phones, tablets, and desktops. Instant's responsive tools let you design for every screen size from a single layout, with overrides where smaller screens need something different.
Breakpoints
On the canvas, the header shows device icons for your breakpoints:
Desktop (primary) — Changes here apply to all screen sizes unless you customize a smaller breakpoint.
Laptop — Applies to screens 1024px and down, unless you customize Tablet or Mobile.
Tablet — Applies to screens 768px and down, unless you customize Mobile.
Mobile — Applies to screens 575px and down.
Desktop and Mobile icons are always visible. Laptop and Tablet stay in the ⋯ device menu until you add an override on that breakpoint — then they surface automatically so you can keep editing them.
Switch breakpoints by clicking a device icon, or cycle through them with Ctrl+Shift+. / Cmd+Shift+. (next) and Ctrl+Shift+, / Cmd+Shift+, (previous). The command palette lists these under Canvas as Next viewport and Previous viewport.
Custom viewport width
Next to the device icons, a width input (labeled w) shows the current canvas width in pixels. Type a value between 320 and 5000 and press Enter to preview at an exact width — useful for checking edge cases between standard breakpoints.
Changing the width adjusts your preview only. Your overrides are still tied to the preset breakpoints above.
Per-breakpoint overrides
When you edit an element on Desktop, the change flows down to smaller breakpoints automatically. When you need a different value on a smaller screen — smaller text, tighter spacing, a hidden element — switch to that breakpoint first, then edit. Instant stores the override for that breakpoint.
For example, font size 48px on Desktop can inherit everywhere until you set 32px on Tablet and 24px on Mobile. An element visible on Desktop can be hidden on Mobile with the eye control in the design panel (Ctrl+Shift+H / Cmd+Shift+H), which is available on the smaller breakpoints.
Inserting on a smaller breakpoint
If you insert new content while viewing a breakpoint other than Desktop, Instant warns you that the change applies only at that screen size. For sections and elements that should appear everywhere, switch to Desktop first, add the content, then refine the smaller breakpoints.
Zoom vs breakpoint
Don't confuse zoom (how large the canvas looks on your monitor) with breakpoint (the simulated screen width). Zoom is the percentage menu in the header; breakpoints are the device icons and width input. Use zoom for comfortable viewing; use breakpoints to design for real devices.
Preview at multiple sizes
Before publishing, cycle through Desktop, Tablet, and Mobile to check that text is readable, images fit, and buttons remain tappable. Toggle Preview (Ctrl+Shift+E / Cmd+Shift+E) at each breakpoint to test links and overlays as a shopper would.