Studio Editor: Troubleshooting Responsiveness Issues
Experiencing issues with the way your client's site looks across breakpoints? The Studio Editor gives you the tools to tackle common responsiveness challenges, like overlapping, misplaced, or misaligned elements on different screen sizes. With the right adjustments, you can create a polished, professional site that looks great on any device.
Tip:
The Responsive Checker helps you catch and prevent the issues covered in this article, saving you the hassle of checking each element individually. For example, it detects unnecessary margins, elements that need different docking, text without a defined minimum size, and more.
Text that appears too small in certain breakpoints
Does your text look too small when viewing your client's site on smaller screens? Using the scale proportionally responsive behavior and the max-min setting, you can ensure your text always looks great on every screen size.
Select the text and open the Inspector panel. Firstly, set the Responsive behavior to Scale proportionally. Then, click Max-min under Design to set the minimum and maximum font sizes.
Tip:
The max-min setting automatically cascades down to smaller breakpoints, so no need to make changes on breakpoints other than desktop.
Misplaced elements across breakpoints
If an element on your client's site shifts position unexpectedly across different screen sizes, it’s likely due to its docking and margin settings. Follow these steps to resolve the issue and ensure your elements stay in their intended position.
Check the element's docking
Select the relevant element and check its docking points (e.g. top, left, etc.) in the Inspector panel. If the docking doesn’t match the desired position (e.g. the element is docked to the top but you want it at the bottom), the element may shift when the screen size changes.
The docking position is indicated by the dotted lines on the element, and the docking points in the Inspector panel (under Position). You can click the docking points on the Inspector to select or remove them.
Adjust the element's margins
Margins define the distance between the element and its docked sides. When the screen size changes, the margins could "push" the element in different directions.
For example, if an element is docked to the top with a 60% margin, it will automatically move up when the section gets narrower (to maintain the set margin value). You can try decreasing the margins and test the results.
When setting the margins in percentage, they adjust dynamically according to the screen size but at the same time, this can cause unexpected shifts. You can consider switching to a fixed size unit (i.e. pixels) for more consistent positioning.
(Fixed behavior section) Switch the elements' margins to pixels
If you set your section's responsive behavior to 'Fixed', it's important to ensure the child elements' margins are also pixel-based.
Using fluid margin units like percentage means that the margins increase or decrease according to screen size, causing the element to move around. Switching to margins in pixels ensures the element always keeps the same distance from the sides, instead of calculating the distance based on the page’s width.
Multiple elements moving around?
If they're all in the same parent container (e.g. section, cell, etc.), you can stack them to ensure consistent spacing and alignment.
Misaligned elements across breakpoints
If elements on your section misalign or break their layout when the screen size changes, it’s often due to inconsistent docking or margin settings.
Follow these steps to identify and fix the issue, ensuring your elements align correctly across all screen sizes.
Ensure the elements are docked to the same side
If elements have conflicting docking settings, they may not align properly as the screen resizes.
Check if elements in the same section have different docking settings. For example, one element may be docked to the top, while another is docked to the bottom. We recommend docking all related elements to the same side of the parent container (e.g. top, bottom).
The docking position is indicated by the dotted lines on the element, and the docking points in the Inspector panel (under Position). You can click the docking points on the Inspector to select or remove them.
Standardize the margin units
Margins define the space between an element and its docked side. Using different units (e.g. percentage vs. pixels) for margins can cause elements to misalign when the screen size changes.
Open the Inspector panel and scroll down to Position to see the element's current margins. To switch to a different margin unit, select the relevant margin and then click the current unit (e.g. px*, %).
Check the relationship between the elements
Firstly, check the Layers panel to confirm that the elements are in the same parent container (e.g. section, cell, etc). If they are, but no relationship is defined between them, the elements will act independently and may overlap.
Stacking the elements vertically or horizontally can fix this issue, as the stack ensures consistent alignment across screen sizes.
Overlapping elements across breakpoints
When arranging elements, they could be spaced just right in the editor but overlap when you check the live site on different viewports. Overlap usually happens due to the way elements are positioned or their responsive behavior.
If elements on your client's site overlap on different screen sizes, follow these steps to identify and fix the issue.
Check the elements' positioning and docking
When elements are positioned independently within the same parent container, they may overlap as the screen size changes. Review the docking settings and positioning units to ensure consistency.
Click each element (e.g. title, paragraph, button) and check how it’s docked in the Inspector panel. Look for differences in the docking and margins of the elements (e.g. mixing percentages and pixels).
If one element uses a percentage margin and another uses a fixed pixel margin, their positions will shift differently as the parent container resizes.
Adjust the elements' responsive behavior
Overlap can also occur if elements behave differently on screen resizing. For example, one element may scale proportionally, another may wrap, and a third may remain fixed.
Select each element and check its responsive behavior in the Inspector panel. Look for elements with mismatched behaviors as these could cause the overlap.
Check the relationship between the elements
Firstly, check the Layers panel to confirm that the elements are in the same parent container (e.g. section, cell, etc). If they are, but no relationship is defined between them, the elements will act independently and may overlap.
Stacking the elements vertically or horizontally can fix this issue, as the stack maintains consistent spacing between the elements.