# Breakpoints

> Lay one screen out at several widths, desktop, tablet and phone, and publish it as one page that switches between them.

Source: https://uxdeck.app/guide/breakpoints (checked against uxdeck on 16 October 2026)

A breakpoint is the same screen at another width. You design the desktop, add a Phone breakpoint, and uxdeck makes a linked copy at 390 pixels. What you change on the desktop flows to the phone, unless you changed it on the phone. When you publish, the screens become one page that switches layout as the window narrows.

Breakpoints work best on screens built with [auto layout](/guide/auto-layout), which reflow on their own as the width changes.

## Add a breakpoint

1. Select a screen: a frame at the top level of the page.
2. Press the **+** on the frame's bar above it (it reads **Breakpoint** when there is room), or press **Add breakpoint** in the **Breakpoints** section of the Design tab.
3. Choose a width.

| Choice | Width |
|---|---|
| **Desktop** | 1440 |
| **Laptop** | 1200 |
| **Tablet** | 810 |
| **Phone** | 390 |
| **Custom width…** | 100 to 4000 |

Widths the screen already has are not offered again. The new frame lands to the right of the row and takes the name of your choice, such as Phone.

**Generate with the agent…** asks the [agent](/guide/agent) to make a version at the next missing width instead, keeping the content and adapting the layout. That one uses agent credits.

## What the new width does for you

A new breakpoint is not a straight copy squeezed into a narrow frame. uxdeck fits it to the width:

- Side padding shrinks with the screen, never below 16.
- A row whose columns would end up narrower than 260 becomes a column. A row that wraps is left to wrap.
- Anything wider than its space is narrowed to fit, and pictures keep their shape.
- Large display type (28 and above) scales down gently, never below 22. Body text is not touched.

On a **Tablet** or **Phone** width it also gets ready for touch: side margins of 32 on a tablet and 16 on a phone, calmer vertical spacing, body text of at least 16, buttons and links large enough to tap, and what happened on hover happens on press instead.

Everything it changes is an ordinary change on the breakpoint, so a layer's **Reset** puts it back. To run it again later, open the **+** on the frame bar and choose **Fit to this width**.

## Linked: what follows and what does not

- **Edits on the main screen flow to every breakpoint,** unless that breakpoint set the value itself.
- **A layer added or deleted on the main screen** is added or deleted in its breakpoints.
- **Change something on a breakpoint** and it is set for that width only. Select a layer in a breakpoint and the Design tab says so: "Follows Desktop. Change anything here to set it for Phone only." Once you have changed values, it counts them, with a **Reset** button to follow the main screen again.

The **Breakpoints** section lists the family, widest first, each row marked **Main** or **Linked**. Click a row to select that frame. On the canvas, a line joins a screen to its breakpoints.

## Link a frame you drew yourself

Already drew a phone version by hand? Select it, open the **+** on its frame bar or **Link a frame** in Breakpoints, and choose **Use as breakpoint of** the screen. Its layers pair up with the screen's by name, words and pictures. Nothing on it changes: the differences are kept as its own values.

## Unlink

Press the unlink button on a **Linked** row. uxdeck asks first. The frame keeps its layers as they are, stops following the main screen, and exports as a page of its own.

## See it and publish it

In [Preview](/guide/preview-options), choose **Responsive** to have the prototype switch between the page's breakpoints as you resize the window. When you [publish](/guide/publish) or export, a screen and its breakpoints are one page with media queries.

## Catches

- **Only screens have breakpoints.** A frame inside another frame cannot.
- **A breakpoint cannot have breakpoints,** and a screen that has some cannot become another's breakpoint.
- **On a phone, or with a view-only link,** the menu says **Open the file on a computer to add a breakpoint**.
- **Reset is per layer.** It brings back the main screen's values for the selected layer, not the whole frame.

Breakpoints are on every plan.