Breakpoints

Set the tablet and mobile widths that drive every responsive control in Styble.

The Responsive Breakpoints panel in Global Settings defines the screen widths at which your site switches to tablet and mobile layouts. These values power the device switcher in the editor and the media queries Styble generates for responsive font sizes, spacing and other per-device controls.

Controls

Setting	Description	Default
Tablet Max Width	The maximum viewport width (in px) treated as tablet. Styble applies tablet styles at @media (max-width: <value>px).	1023 px
Mobile Max Width	The maximum viewport width (in px) treated as mobile. Styble applies mobile styles at @media (max-width: <value>px).	767 px

Each field has a tablet/mobile icon, a number input, and a px label. The values are exposed as CSS variables --sp-styble-breakpoint-tablet and --sp-styble-breakpoint-mobile.

Resetting

Each breakpoint has a reset button next to its label. Clicking it restores the default:

• Tablet resets to 1023 px.
• Mobile resets to 767 px.

The reset button highlights as active whenever the current value differs from its default, so you can see at a glance which breakpoints have been changed.

How breakpoints flow through Styble

Changing these values shifts the media queries used by responsive controls everywhere — for example the per-device font sizes in Typography and the device switcher previews in the editor toolbar.

Tips

• Keep the defaults unless your design has specific layout needs at non-standard widths.
• Set breakpoints before fine-tuning per-device styles, so your tablet/mobile adjustments are based on the final cutoffs.
• The editor's desktop / tablet / mobile preview matches these values — use it to check each breakpoint.
• See the Global Settings overview for how all panels fit together.