Horizontal scrollbar on mobile devices

Issue

A horizontal scroll bar appears on mobile devices.

Possible cause

The horizontal scroll bar occurs due to an element which creates overflow.

Solution

Determine overflowed containers

You need to determine which section/container has overflowed.

By using Javascript

Follow these steps:

1. Open the page showing a horizontal scrollbar in your browser.
2. Right click on the page and choose Inspect. (or press Ctrl+Shift+I, on the keyboard)
   
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 hit Enter. This will highlight the elements causing the overflow in a red box.
   
   (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));
   
6. Scroll up and down the page to find the elements highlighted in red. 
7. Edit your page with Elementor and adjust those elements to fix. 

For further information, refer to the following articles:

• Find Overflow Element in Elementor Causing Horizontal Scroll | My Custom Software 
• Easily Remove Elementor Horizontal Scroll on Mobile Devices 
• Overflow Issues In CSS — Smashing Magazine 

By deleting sections/containers manually

Follow these steps:

1. Open the page that has issues.
2. Click Edit with Elementor.
3. From the top-right, click Publish > Save as Template. The page gets saved as a template.
4. Go back to the WordPress Dashboard.
5. Go to Elementor>Editor>Templates.
   
   The Saved Templates screen opens in the right pane.
   
6. Hover over the template you just saved and select Edit with Elementor.
   
7. Click X to delete each Container, one by one.
   
   Note

   You can restore the deleted content from the History panel.
   
   
8. Test on mobile after each deletion whether the horizontal scroll bar disappears. When it disappears, you’ve found the problematic section.

Fix the overflowed containers

Follow these steps:

1. Go to the page that is showing the horizontal scrollbar on mobile.
2. Select the overflowing Container.
3. In the panel, the options open to the Layout tab.
   
4. Open the Additional Options section.
   
5. Use the dropdown menu to set Overflow to Hidden.