Per-breakpoint responsive editing
Design for desktop, tablet, and mobile — without rebuilding anything.
The breakpoint tabs
At the top of the editor you can switch the canvas between Desktop, Tablet, and Mobile previews. The Style panel shows the same three tabs: whichever tab is active, style changes you make apply only to that breakpoint.
You can override the usual suspects per breakpoint:
- Spacing — padding, margins, and gaps
- Typography — font size, line height, and alignment
- Layout — column counts and stacking order
- Visibility — hide a widget on specific devices
How inheritance works
Styles cascade from larger to smaller screens: Mobile inherits from Tablet, and Tablet inherits from Desktop. Set a style once on Desktop and it applies everywhere — until you override it on a smaller breakpoint. Overridden properties are marked in the Style panel so you can see at a glance what's been customized per device.
A typical workflow: design the whole page on Desktop, then switch to Mobile and fix only what needs fixing — usually font sizes, padding, and hiding the occasional decorative widget.
Resetting an override
To make a property follow its parent breakpoint again, click the reset icon next to the overridden property in the Style panel. The property immediately falls back to the inherited value. Resetting never touches your other breakpoints.
What ships to your theme
Per-breakpoint overrides compile to ordinary CSS media queries in the page's managed asset file — no JavaScript, no runtime device detection. The result is fast, works with every OS 2.0 theme, and respects visitors who prefer reduced motion.