> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://zuora.ferndocs.com/docs/platform/extensibility/experience-builder/responsive-design/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://zuora.ferndocs.com/_mcp/server.

# Responsive design

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

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.

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

## Docs

- [Screen artboards, breakpoints and variants](https://zuora.ferndocs.com/docs/platform/extensibility/experience-builder/responsive-design/screen-artboards-breakpoints-variants.md): Learn how screen artboards, breakpoints, and screen variants work together to create responsive page layouts and how to apply best practices when defining them.
- [Define breakpoints](https://zuora.ferndocs.com/docs/platform/extensibility/experience-builder/responsive-design/define-breakpoints.md): Define and configure responsive breakpoints for your project.