Responsive Preview

How responsive preview works in SG-Builder — breakpoint switching for per-device authoring.

Responsive Preview is the SG-Builder feature that lets operators switch between the platform's standard breakpoints and author or verify per-device behavior. The breakpoint switcher in the action bar drives the preview; per-breakpoint trait overrides apply at each viewport. This page is the Reference definition.

What is this for?

Read this page when you want the structural definition of responsive preview — what the breakpoints are, how the switcher behaves, and how per-breakpoint overrides interact with default styles.

Good use cases

• You are scoping responsive design for a new page.
• You are explaining to a stakeholder how SG-Builder handles responsive editing.
• You hit a "the page looks wrong on mobile" question and want the model laid out.

What NOT to use this for

• Step-by-step procedures — open the relevant Guide.
• Per-component responsive nuance — Component References.
• Per-release shipped change — open What's New or Changelog.

How this connects to other features

• SG-Builder Overview — parent surface.
• Builder Workspace — workspace shell that hosts the breakpoint switcher.
• Editor Actions — broader action set including breakpoint switching.

Definition

Responsive Preview is the breakpoint-switching surface inside SG-Builder. The action-bar breakpoint switcher exposes six standard breakpoints (1920 / 1199 / 991 / 767 / 575 / 480). Switching breakpoint changes the canvas viewport and exposes per-breakpoint trait overrides for the selected block.

The defining property is per-breakpoint authoring. Per-breakpoint overrides apply scoped to one viewport; they do not bleed across breakpoints unless the operator explicitly applies them broadly.

Where to find it

The breakpoint switcher is in the SG-Builder action bar at the top of the canvas. Six buttons — 1920, 1199, 991, 767, 575, 480 — switch the canvas viewport. The right-panel trait editor updates to show per-breakpoint overrides for the selected block.

The standard breakpoint set

SGEN exposes six standard breakpoints aligned to common device widths.

1920 — Wide desktop

The default desktop authoring breakpoint.

1199 — Standard desktop

The most common viewer breakpoint for office desktops.

991 — Tablet landscape

Where layout typically transitions between desktop-style and tablet-style.

767 — Tablet portrait

Tablet-class viewports where multi-column layouts often collapse.

575 — Phablet

Larger phone class.

480 — Mobile

Standard mobile viewport.

Switcher behavior

Click to switch

The operator clicks one of the six breakpoint buttons in the action bar. The canvas viewport changes to match. Selected block traits remain visible in the right panel.

Per-breakpoint trait overrides

When a breakpoint is active, trait edits in the right panel apply scoped to that breakpoint. Traits not overridden inherit from the next-larger breakpoint (or the base style if none).

Override indicator

Traits with per-breakpoint overrides show a visual indicator in the right panel so the operator knows the trait differs from the cascade default.

Per-breakpoint cascade

Trait values cascade from larger to smaller breakpoints.

Cascade direction

A trait set at 1920 applies at all smaller breakpoints unless overridden. A trait set at 480 applies only at 480.

Override scope

An override at any breakpoint applies at that breakpoint and inherits down to smaller breakpoints unless overridden again.

Reset

Per-breakpoint overrides can be cleared individually, returning the trait to the cascade default.

Examples

Example 1 — Operator authors a hero with per-breakpoint heading sizes

The operator sets the heading at 1920 to 48px. They switch to 991, set the heading to 32px (override). They switch to 480, set the heading to 24px (further override). The cascade applies — at 1199 the heading shows 48px (inherited from 1920); at 767 it shows 32px (inherited from 991); at 575 it shows 32px; at 480 it shows 24px.

Example 2 — Operator verifies a layout across breakpoints

After authoring at 1920, the operator clicks through 1199 / 991 / 767 / 575 / 480 to verify the layout holds at each viewport. Adjustments at problem breakpoints apply scoped via override.

Example 3 — Operator clears a stale override

A previous override at 575 is no longer wanted. The operator switches to 575, opens the trait, clears the override; the trait returns to the cascade default from 767.

Related reading

• SG-Builder Overview — parent surface.
• Builder Workspace — workspace shell.
• Editor Actions — broader action set.

Vocabulary cross-reference

• Breakpoint is one of the six standard responsive widths.
• Breakpoint switcher is the action-bar control that switches the canvas viewport.
• Per-breakpoint override is a trait value that applies scoped to one breakpoint.
• Cascade is the inheritance from larger to smaller breakpoints.

Related reading