# Breakpoints

> Edit ProBlocks at Desktop, Tablet and Mobile breakpoints in DS Manager. Desktop is the base, smaller sizes follow it, and overrides show in blue.

Canonical: https://www.shadcndesign.com/docs/ds-manager-breakpoints

ProBlocks are page sections, so they need to work on every screen. On ProBlocks pages you edit them at one size at a time: Desktop, Tablet or Mobile.

## Sizes

The switch on the right of the canvas top bar has three sizes:

| Size | Canvas width |
|---|---|
| Desktop | 1280 px |
| Tablet | 768 px |
| Mobile | 390 px |

The canvas is laid out at the real width and scaled to fit, so the blocks' responsive classes apply exactly as they will in a browser. The switch is on every ProBlocks category page and on the ProBlocks styles page (**Brand** > **ProBlocks**), and DS Manager remembers your pick on this device.

The Style tab always reads and writes the size the canvas shows. Each control shows one value, the one that renders at that width.

## How sizes cascade

Desktop is the base, and styles cascade down:

- A change on **Desktop** shows on Tablet and Mobile too, unless that size already has its own value.
- A change on **Tablet** shows on Mobile too, unless Mobile has its own value. Desktop does not change.
- A change on **Mobile** stays on Mobile.

So a smaller size gets its own value only when you edit it at that size. For example, set a hero title to `7xl` on Desktop and it is `7xl` everywhere. Then switch to Mobile and set it to `4xl`: Mobile keeps `4xl`, and Desktop and Tablet stay at `7xl`.

DS Manager writes the Tailwind breakpoint prefixes, such as `sm:` and `lg:`, for you, with as few classes as the result needs.

## Overrides

<RichImage
  src="/docs/ds-manager/breakpoints-tablet.webp"
  alt="The Pricing 1 block at Tablet size in DS Manager, with its title selected, the Size label in blue in the Style tab and its menu open on Reset to Desktop value"
  width="899"
  height="732"
  quality="90"
/>

When a field at Tablet or Mobile has a value different from the size above it, its label turns blue. Hover the label to see which size owns the value, for example "Set on Tablet only".

To go back to the inherited value:

1. Click the blue label.
2. Pick **Reset to Desktop value**.

On Mobile, the action is **Reset to Tablet value** when Tablet has its own value, and **Reset to Desktop value** when Tablet follows Desktop. The field then follows the size above it again, and later changes there reach it.

The dot next to a changed field still resets it to the style's default, as on a component page. See [Editing components](/docs/ds-manager-components).

## Shared styles and single blocks

The cascade works the same way in both places you edit blocks:

- On a **category page**, an edit changes the selected part of that one block.
- On the **ProBlocks styles page**, an edit changes a shared style, such as Heading XL or Paragraph, in every block. The rail's header names the size: "Changes here apply to every block on Desktop."

[ProBlocks](/docs/ds-manager-problocks) covers the blocks themselves, free and Pro access, and installing them.