Responsive overrides

Every Impulse page is built once but rendered three ways — Desktop, Tablet, and Mobile. The editor exposes a device-tab strip at the top of the canvas; clicking a tab switches the panel into that device's view. Most settings can hold a separate value per device.

The breakpoints are fixed:

Mobile — viewport ≤ 767 px
Tablet — viewport ≤ 1024 px (and > 767)
Desktop — everything wider

How a setting becomes per-device

Per-device-aware settings store a base value (the Desktop one) plus optional _tablet and _mobile overrides. At render time the viewport picks which value applies, walking the chain:

Mobile asks for _mobile; if absent, falls back to _tablet; if

absent, falls back to the base.

Tablet asks for _tablet; if absent, falls back to the base.
Desktop always reads the base.

In practice: setting padding on Mobile only changes the mobile value. Desktop stays untouched. Switching back to Desktop restores the desktop value.

What's per-device

Almost everything that affects size, spacing, or layout:

Padding / Margin — every side, every block
Font Size, Line Height, Letter Spacing
Width / Height / Max-Width
Columns / Gap / Direction
Alignment (text-align, vertical-align, justify-content)
Visibility (hide / show per device)
Border radius, button radius, image radius
Animation layers (per-device entrance animations)

If you can drag a slider or click a button-group on Desktop, you can do the same with a different value on Tablet or Mobile.

Per-device text content

Since 2.0, the text content itself can vary per device — not just its size or alignment. This applies to:

Animator (heading) — the headline text in line_1
Text block — the rich-text body in content

Switch to Tablet or Mobile, edit the heading or text input, and the new copy is saved as line_1_tablet / line_1_mobile (or content_tablet / content_mobile). Empty override = inherit from Desktop.

Use this when the desktop copy is too long or the rhythm is wrong on small screens. Common patterns:

Desktop: "Strategic design for ambitious brands"
Mobile: "Design that drives growth"

Or:

Desktop: a 4-line lead paragraph
Mobile: a single tight sentence

The frontend renders the desktop copy as the primary HTML and ships the device variants as data-attributes. A small client-side swapper picks the matching one on load and on viewport resize, with inheritance (mobile → tablet → desktop). No flicker on first paint because the desktop copy is the real DOM until JS swaps it.

In the editor, switching device tabs reloads the iframe with that device's variant pre-rendered, so the canvas always shows what the real device will see.

What's NOT per-device

Colour — one swatch is one colour, on every device. Use a

different element per breakpoint (with Visibility) if you need a different colour on mobile.

Background image / video — one source, all devices. Use the

Object-Position controls to reframe instead.

Element type / structure — you can't have a Text block on

desktop and an Animator on mobile. The element tree is identical per device; only its rendered styles and now its text differ.

Editor UX

The active device's value is what the panel input shows. So on Tablet, dragging Padding Top from 40 → 60 saves padding_top_tablet = 60 and leaves padding_top (the desktop value) unchanged.

To clear an override and inherit Desktop again, you currently set the value back to its Desktop equivalent. (A "Reset to desktop" affordance is on the roadmap.)

Don't

Don't use Visibility to swap content on different devices when a

per-device value would do. Visibility is for hiding entire blocks (e.g., a desktop-only sidebar). Per-device values are cheaper.

Don't expect Mobile to inherit from Tablet by default — it does

if there's a Tablet override. With no Tablet override, Mobile reads from Desktop directly.

Don't set Desktop after configuring Tablet/Mobile and expect the

overrides to track. They're independent values; a Desktop change doesn't propagate.

concepts/page-overlay — page-level overlay that varies with the

scene background, not per-device but worth knowing alongside

blocks/animator — heading block with per-device text
blocks/text — body text block with per-device content