Point: Responsive design in Studio.Design
In Studio.Design, you build one page design and then adjust its styles for each screen width (breakpoint) to create a responsive design.
Layout, appearance, and position of boxes and text can be changed for each breakpoint, but the actual content of images and text, as well as the grouping structure, are shared across all breakpoints.
For an overview of responsive design and related features, check out these articles:
Common causes of broken layouts on smaller screens
When elements get cut off, overflow, or create unwanted space in responsive views, the cause is usually that the parent box has a fixed width or height set in pixels (px).
In Studio.Design, when you drag to resize a box (its width or height), a fixed px value is set automatically.
Fixed values (px) lock a box's size regardless of screen size, so they don't adapt well to changes in screen width or text wrapping — which often leads to broken layouts.
Tips: Choose the right size unit for each element
To keep your responsive design stable, it's important to pick the size unit that fits each element.
Use px for elements that should always stay the same size, like a logo; use % for layouts where you want consistent proportions, such as columns; and use auto for parent boxes whose height should change based on the amount of content.
For details on each size unit and when to use it, see Box layout: Set the size (width and height).
How to find the box that's breaking
Here's how to pinpoint the element that's breaking and select the parent box you need to fix.
In the toolbar at the bottom of the design editor, click [Mobile] to switch the screen view.
Scroll down the page from the top and look for anything that's cut off, overflowing, or leaving unwanted space.
When you find a broken element, select the parent box one level above it.
Change the parent box's height to auto
We recommend setting a parent box's height to auto instead of a fixed px value.
A box set to auto adjusts its height (and sometimes its width) to fit the amount of content in its child boxes, making it much easier to adapt to different screen sizes.
Select the box element you want to change.
If the layout is already breaking, find the box that's breaking and select the parent box one level above it.
In the right panel, select the [Box] tab. If the panel is closed, open the right panel.
Under [Layout], check the [Height] setting. If it's set in px, change the unit to auto.
If needed, also check whether a px value is appropriate for [Width].
If you're editing a site that's already live, update your site to publish the changes.
Fix elements that overflow
When a child box is wider or taller than the width or height set on its parent box, it overflows.
This happens especially with long text or images: everything may look fine in the editor, but as the screen gets narrower, text wrapping or image proportions can push elements outside the box.
What to check to prevent overflow
Find the box that's breaking and select the parent box one level above it.
In the right panel, select the [Box] tab. If the panel is closed, open the right panel.
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 a unit other than px (such as % or auto) for the width as well.
If elements still overlap, try adjusting the amount of text or reviewing your spacing and margins.
If you're editing a site that's already live, update your site to publish the changes.
Reduce scrolling that feels "sticky"
If a child element is wider than its parent box and the overflow setting is set to "Visible" or "Scroll," horizontal scrolling or moving around the page can feel like it catches on responsive views.
As the screen gets narrower, text wrapping and element positioning change — so it's important to allow plenty of room in your size settings ahead of time.
How to reduce sticky scrolling
Find the box that's breaking and select the parent box one level above it.
In the right panel, select the [Box] tab. If the panel is closed, open the right panel.
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 a unit other than px (such as % or auto) for the width as well.
In the same [Box] tab, open the [Position] menu and check the [Overflow] setting (Visible / Hidden / Scroll). If content is overflowing unintentionally, consider using [Hidden].
If your design needs horizontal scrolling, apply [Scroll] only to the box that contains the elements you want to scroll.
If you're editing a site that's already live, update your site to publish the changes.
Tips: Horizontal scrolling doesn't show a scrollbar
Even when you set up horizontal scrolling, the browser scrollbar won't appear.
Visitors scroll horizontally using trackpad gestures, mouse wheel gestures, or swiping.
height hegiht height setting auto responsive broken layout