Responsive design

Learn how responsive design in Experience Builder uses screen variants, breakpoints, and style-only overrides to adapt layouts for different screen widths.

Responsive design in Experience Builder uses screen variants to adapt layouts and styling for different screen widths. A breakpoint is a screen width at which the design should look different.

Use responsive columns for simple layouts

For many responsive layouts, the simplest approach is to use responsive columns. This is useful when a layout should appear as a horizontal stack on larger screens and a vertical stack on smaller screens.

You can insert a Responsive Columns element and adjust its layout settings from the right sidebar. On the smallest breakpoint, columns stack vertically automatically.

Breakpoints

Every project includes a set of breakpoints, also called screen variants.

A breakpoint defines a screen width where the design changes. For example, a project might use breakpoints such as:

• Screens less than 768px wide
• Screens less than 480px wide

When editing a page or component, the toolbar shows the breakpoints that match the current artboard width. Select a breakpoint to record changes for that breakpoint.

How breakpoint overrides work

Breakpoint overrides are cumulative. For example, a 400px screen can match both a tablet-sized breakpoint and a mobile-sized breakpoint at the same time.

Breakpoint ranges do not define both a start and an end. They are defined by the width threshold at which they begin to apply.

Use style changes only

When recording overrides for a breakpoint, limit changes to styles in the Design tab.

Avoid content overrides such as changing text or images for mobile or other breakpoint-triggered variants. These can briefly show the original content before the override is applied.