Studio Editor: Troubleshooting Gaps and Horizontal Scroll Bars

4 min read
While building a site in the Studio Editor, you may notice unwanted gaps and horizontal scroll bars. Use the steps in this article to learn what you should check, and ensure that they don't appear to visitors on any screen size.
A GIF showing a live site that needs to be horizontally scrolled across in order to view content.

Step 1 | Find and re-position elements in the Layers panel

If an element is outside its section boundaries, a blank gap is automatically created to make the element fully visible. Use the Layers panel to see a list of your page elements, and click each one to check and re-position them as needed.

To find and re-position elements in the Layers panel:

  1. Click Layers  on the left of the Studio Editor.
  2. Select an element to find it on the page. 
  3. Re-position the element using the following tools:
An image is selected in the Layers panel. The cursor is hovering over the width field in the Inspector panel.

Step 2 | Check the page edges

While an element may be positioned inside a section, its edges could still cross the page's boundaries and create a white gap and / or a horizontal scroll bar. This often happens with text elements. 
Click each section and hover over all of the elements close to the edges of the page. If any of them are overflowing, you can move or resize them as needed.
A studio editor site. The cursor is hovering over an image, which goes beyond the page's boundaries.

Step 3 | Change the Overflow Content setting of the page

You can hide a page's overflow content to prevent white gaps and horizontal scroll bars from automatically being displayed on the page. This setting "clips" the edges of the page, so any overflowing elements (or parts of elements) are cropped. 

To change the overflow content setting:

  1. Select your page:
    1. Go to the relevant page.
    2. Click Layers  on the left of the Studio Editor.
    3. Click Page.
  2. Click the Open Inspector arrow  at the top right of the Studio Editor.
  3. Click the Design tab .
  4. Select Hide from the Overflow content drop-down.
The Inspector panel of a page in the studio Editor. The cursor is hovering over the Hide option.

Step 4 | Check the section's height

The height and / or minimum height you set for a section or CSS Grid may create a gap. If you're using the Fit to screen behavior, or the vh measurement (which is relative to the viewport height), the gap may appear bigger on larger screens. 
You can use the Inspector panel to check the CSS Grid and section's sizing, and change their height and / or minimum height as needed. 

To check the section's height:

  1. Select the relevant section.
  2. Click the Open Inspector arrow  at the top right of the Studio Editor
  3. Click the Design tab .
  4. Check and adjust Height and Min H settings under Size
The Inspector panel of a section in the studio Editor. The cursor is hovering over the Height field.

Troubleshooting

If you’re still seeing unwanted gaps on your client's live site, check out this video tutorial to troubleshoot the issue. 

Did this help?

|