Studio Editor: Troubleshooting Unwanted Gaps in a Section
If you notice unwanted gaps appearing in a section on your live site, it is often caused by the way responsive behavior is set for your section and its elements. When a section and its elements have conflicting responsive settings, gaps can appear as the screen size changes.
In the example above, the form’s responsive behavior is set to relative width, meaning its width adjusts based on the size of its parent container (e.g., a grid cell), but its height remains fixed. The section, however, is set to scale proportionally, so both its width and height adjust proportionally as the screen size changes. This creates a large gap on bigger screens as the section gets taller, but the form doesn't.
Learn more about the different responsive behaviors.
Removing the gap
First you need to check the responsive behavior of the element and the section to see if they are aligned. If the responsive behaviors are not aligned, change them as instructed below.
To remove the gap:
Select the element in the section.
Click the Open Inspector icon
at the top right of the editor.
Select Relative width from the Responsive behavior drop-down.
Select the relevant section.
Click the Open Inspector icon
at the top right of the editor.
Select Fixed height from the Responsive behavior drop-down.
After adjusting the responsive behavior, test your design to ensure no gaps appear on larger screens by resizing the canvas.
Video tutorial
Watch a live demo resolving this issue.
FAQs
Click a question below to learn more.
What does the 'fixed height' responsive behavior actually mean?
Fixed height means that the section always stays the same height, regardless of screen size.
It's important to understand that the fixed height setting actually has a minimum height. When you set a section to 'fixed height', it won't shrink smaller than this height. However, the section may become taller if an element inside it pushes the height.
Can I use 'scale proportionally' for the section?
You can, but be aware that 'scale proportionally' changes both the width and height of the section. If the elements inside don’t scale proportionally, this can create gaps. Use 'fixed height' to prevent this issue.
How do I test my site on different screen sizes?
In the editor, resize the canvas to simulate various screen widths. After publishing, view your site on devices with different screen sizes or use your browser's developer tools to test responsiveness.
What if I have multiple elements in the section?
If there are several elements in the section, check the responsive behavior of each one. Conflicting settings (e.g., one element set to fixed and another to relative width) can cause layout issues. Align the responsive behavior of all elements to avoid gaps.
Do grids help prevent gaps?
Grids can help create more structured layouts and avoid gaps. By placing elements inside a grid, you can define their size and alignment more precisely, ensuring they adjust appropriately with the section.