In Studio.Design, you can set up to five breakpoints: Default, Small, Tablet, Mobile, and Mini. For screen widths between these breakpoints, the design from the closest breakpoint is scaled down to fit.

If any boxes have their height or width set to a fixed value like "px", they can't scale down properly, which can cause elements to overflow or the layout to break.
Using size units like "%", "auto", or "flex" — not just "px" — helps prevent layout issues at screen widths between breakpoints.
​

For more on size units, see Box layout: Setting size (width and height).

Here are some common patterns that tend to break on mobile, along with how to fix them.

When the parent box height is set to a fixed "px" value, there may not be enough space to fit the contents when the screen width gets narrower. This can cause text or images to overflow outside the parent box. (See: When elements get cut off, overflow, or have extra space in responsive view)

Unless you have a specific reason to set a fixed height, we recommend using "auto" for the parent box height.

When set to "auto", the box height automatically adjusts based on the size of its contents, so you're less likely to run into overflow issues.

The same applies to width — using "auto" or "%" generally makes your layout more resilient to changes in screen width.

This is when you place an image box with a fixed "px" width next to a text box set to "auto" width at the same level.

When the screen gets narrower, the text can't fit next to the fixed-width image, and elements may overflow outside the parent box.

For this kind of layout, set the image box width to "px" or "%", and set the text box to "1flex".

When set to "flex", the text box automatically fills the remaining space based on the size of the other elements at the same level.

This way, even when the screen gets narrower, the text wraps inside the parent box and is less likely to overflow horizontally.

If all widths are specified in "px", element sizes stay fixed even when the screen width changes, which makes layouts more likely to break at screen widths between breakpoints.

This is especially common in multi-column layouts, where the total width may exceed the screen width, causing columns to overflow or wrap unexpectedly.

When you set widths in "%", sizes adjust automatically based on the parent box width, making the layout more resilient at screen widths between breakpoints.

Rather than overriding "px" values at each breakpoint, combining "%", "auto", and "flex" for a relative layout lets you handle a wider range of screen sizes with fewer settings.

When checking that everything looks right on mobile, keep an eye on these things too:

After checking these points, fine-tune your design while reviewing both the design editor's preview and the Live Preview. This helps reduce gaps between what you see in the editor and how it actually looks on a real device.