Point: Responsive design in Studio.Design
In Studio.Design, you create a responsive design by starting from a single page design and adjusting styles for each screen width (breakpoint).
You can change the layout, appearance, and position of boxes and text for each breakpoint, but the actual content of images and text, as well as the grouping structure, stays the same across all breakpoints.
For a broader look at responsive design and related features, check out the following articles:
Common reasons elements break in responsive view
When elements get cut off, overflow, or show unexpected spacing in responsive view, the cause is usually that the parent box has a fixed width or height in pixels (px).
In Studio.Design, when you change a box's size (width and height) by dragging, the value is automatically set in pixels (px), which is a fixed unit.
Fixed values (px) keep a box the same size no matter the screen size, so they don't adapt well to changes in screen width or text line breaks—which can easily lead to broken layouts.
Tip: Choose the right size unit for the job
To keep your responsive design stable, it's important to pick the right size unit for each element.
We recommend using px for elements that should always stay the same size (like a logo), % for layouts where you want even proportions (like split columns), and auto for parent boxes that should adjust height based on their content.
For details on each size unit and when to use them, see Box layout: Setting the size (width and height).
Change the parent box's height to auto
For a parent box's height, we recommend using auto instead of a fixed value (px).
A box set to auto automatically adjusts its height (and sometimes its width) based on the amount of content in its child boxes, making it easier to adapt to different screen sizes.
How to change a parent box's height to [auto]
Select the parent box that contains the element with the broken layout.
In the right panel, select the [Box] tab. If the panel is closed, open the right panel first.
Under [Layout], check the [Height] setting. If the height is in px, change the unit to auto.
If needed, also check whether using px for the [Width] is appropriate.
If you're editing a site that's already published, update the site to apply your changes to the live version.
Common case: Elements overflowing
When a child box is wider or taller than its parent box, it will overflow outside the parent.
This is especially common with long text or images: even if everything looks fine in the editor, elements can overflow at narrower screen widths because of text line breaks or image proportions.
How to prevent overflow
In the right panel, select the [Box] tab. If the panel is closed, open the right panel first.
Under [Layout], check whether [Width] and [Height] are set in px.
If [Height] is set in px, change it to auto. If needed, consider using units other than px for the width too (such as % or auto).
If elements still overlap, try adjusting the amount of text or reviewing the padding and margins.
If you're editing a site that's already published, update the site to apply your changes to the live version.
Common case: Scrolling feels janky
If a child element is wider than its parent box and the overflow setting is set to "Visible" or "Scroll," horizontal scrolling or screen movement can feel janky in responsive view.
Since text line breaks and element wrapping change as the screen gets narrower, it's important to leave enough room in your size settings from the start.
How to reduce janky scrolling
In the right panel, select the [Box] tab. If the panel is closed, open the right panel first.
Under [Layout], check whether [Width] and [Height] are set in px.
If [Height] is set in px, change it to auto. If needed, consider using units other than px for the width too (such as % or auto).
In the same [Box] tab, check the [Overflow] setting (Visible / Hidden / Scroll) under the [Position] menu. If there's unintended overflow, consider setting it to [Hidden].
If your design needs horizontal scrolling, set [Scroll] only on the box that contains the element you want to scroll.
If you're editing a site that's already published, update the site to apply your changes to the live version.
Tip: Horizontal scrolling doesn't show a scrollbar
Even when horizontal scrolling is enabled, the browser scrollbar won't appear.
Users scroll horizontally using trackpad gestures, mouse wheel gestures, or swipe actions.
height hegiht height setting auto responsive broken