help center

On this page

Horizontal scrollbar on mobile devices

Last Update: March 4, 2024

Issue

A horizontal scroll bar appears on mobile devices.

Horizontal scrollbar on mobile devices 6

Possible cause

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

Solution

Determine overflowed containers

You need to determine which section 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)
    Horizontal scrollbar on mobile devices 5
  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:

By deleting sections 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 Templates > Saved Templates.
    Horizontal scrollbar on mobile devices 2
  6. Click Edit for the template you just saved.
    Horizontal scrollbar on mobile devices 1
  7. Click X to delete each Container, one by one.
    Note: You can restore the deleted content from the History panel.
    Horizontal scrollbar on mobile devices 4
  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. Edit Container that has overflowed.
  3. Under Layout > Additional Options, set Overflow to Hidden.
    Horizontal scrollbar on mobile devices 3

Have more questions? We’re more than happy to assist.

Link is copied to clipboard!
On this page

Is this article helpful?

Share this article