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:

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

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.

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 covers the blocks themselves, free and Pro access, and installing them.