Find Overflow Element in Elementor Causing Horizontal Scroll

When testing a page build with elementor, you may find that the page can scroll right and left on mobile or tablet when it shouldn’t. This is usually caused by an element that is not positioned properly.

How to debug elementor to show you which element is causing the horizontal overflow

1. Visit the page in your browser
2. Open Developer Tools – Right Click, Inspect or Ctrl+Shift+I
3. You may already have this open to view the page on other device widths (Ctrl+Shift+M once Inspect is open)
4. Click on the Console tab
5. Paste the following code and then hit Enter

(function (d) {
    var w = d.documentElement.offsetWidth,
        t = d.createTreeWalker(d.body, NodeFilter.SHOW_ELEMENT),
        b;
    while (t.nextNode()) {
        b = t.currentNode.getBoundingClientRect();
        if (b.right > w || b.left < 0) {
            t.currentNode.style.setProperty('outline', '1px dotted red', 'important');
            console.log(t.currentNode);
        }
    };
}(document));

• This will highlight the elements causing the overflow in a red box.
• Scroll up and down the page to fine the elements highlighted in red.
• Edit your page with elementor and adjust those elements to fix.

Based on:

How to override overflow issues and hide the overflow

1. Go into the Elementor editor and Edit the section that has the overflow element
2. Go to the Layout tab, scroll down to the Overflow dropdown and select the Hidden option;
3. Now any element that is sticking out of the section will be hidden

Note: The issue with this setting is if you purposely have some element overlapping other sections above or below it will no longer show the overflow design. In that case you are better off properly positioning that overflow element for all device sizes.

How to hide overflow elements for the whole page with CSS code

1. Navigate to Appearance > Customize > Additional CSS
2. Add the following CSS code:

html,
body{
  width:100%;
  overflow-x:hidden;
}