Breakpoint mode

Breakpoint mode is the editing state that lets you make style changes scoped to a specific viewport width. Any style you edit while in breakpoint mode generates a CSS media query rule — it does not overwrite your base styles.

Entering breakpoint mode

1. Click the breakpoint mode button

   Click the breakpoint mode toggle in the toolbar or next to the width slider. A menu appears listing your project’s breakpoints.

2. Select a breakpoint

   Click the breakpoint you want to edit — for example, Tablet (768 px). The canvas border turns orange to indicate you’re now in breakpoint mode.

3. Make your edits

   Select elements and change their styles in the Style pane exactly as you normally would. Every change you make is scoped to the selected breakpoint.

The orange border — your constant reminder

When breakpoint mode is active, a prominent orange border frames the entire canvas. This visual indicator exists for one reason: to prevent you from accidentally editing base styles when you meant to be editing responsive overrides.

How breakpoint mode edits are scoped

Edits you make in breakpoint mode are additive overrides, not replacements. Your base styles still apply fully — you’re only adding rules that kick in when the viewport hits the breakpoint’s media query condition.

For example, if you set a container to display: flex; flex-direction: row in your base styles, and then enter Tablet mode and set it to flex-direction: column, the generated CSS will look like this (in desktop-down mode):

/* Base — applies everywhere */
.container { display: flex; flex-direction: row; }

/* Override — applies only at 768 px and below */
@media (max-width: 768px) {
  .container { flex-direction: column; }
}

You only need to change the properties that differ at this breakpoint. Everything not overridden continues to use the base value.

The breakpoint indicator in the selector field

When you select an element in breakpoint mode, a small badge appears in the selector field showing which breakpoint is active — for example, “768 px”. This badge is a quick visual confirmation that your next edit will be scoped, not global.

Exiting breakpoint mode

Click the breakpoint mode toggle again, or click the Exit breakpoint mode button at the top of the canvas. The orange border disappears and you return to editing base styles.

Common mistakes

• Editing outside breakpoint mode when you meant to be inside it. The orange border tells you which mode you’re in — check it before editing.
• Editing in the wrong breakpoint. Verify the breakpoint badge in the selector field matches the size you intended to fix.
• Over-overriding. Only change what needs to change at each breakpoint. The fewer overrides you add, the easier the responsive system is to maintain.