{"id":307,"date":"2020-03-16T13:49:35","date_gmt":"2020-03-16T11:49:35","guid":{"rendered":"https:\/\/elementor.com\/help\/?p=307"},"modified":"2026-04-30T12:06:47","modified_gmt":"2026-04-30T09:06:47","slug":"horizontal-scrollbar-on-mobile-devices","status":"publish","type":"post","link":"https:\/\/elementor.com\/help\/horizontal-scrollbar-on-mobile-devices\/","title":{"rendered":"Horizontal scrollbar on mobile devices"},"content":{"rendered":"\n

Issue<\/h2>\n\n\n\n

A horizontal scroll bar appears on mobile devices.<\/p>\n\n\n\n

\"Horizontal<\/figure>\n\n\n\n

Possible cause<\/h2>\n\n\n\n

The horizontal scroll bar occurs due to an element which creates overflow.<\/p>\n\n\n\n

Solution<\/h2>\n\n\n\n

Determine overflowed containers<\/h3>\n\n\n\n

You need to determine which section\/container has overflowed.<\/p>\n\n\n\n

By using Javascript<\/h4>\n\n\n\n

Follow these steps:<\/strong><\/p>\n\n\n\n

    \n
  1. Open the page showing a horizontal scrollbar in your browser.<\/li>\n\n\n\n
  2. Right click on the page and choose Inspect. (or press Ctrl+Shift+I, on the keyboard)
    \"Horizontal<\/li>\n\n\n\n
  3. You may already have this open to view the page on other device widths (Ctrl+Shift+M once Inspect is open)<\/li>\n\n\n\n
  4. Click on the Console<\/strong> tab.<\/li>\n\n\n\n
  5. Paste the following code and hit Enter. This will highlight the elements causing the overflow in a red box.

    (function (d) {<\/code>
        var w = d.documentElement.offsetWidth,<\/code>
            t = d.createTreeWalker(d.body,<\/code>
    NodeFilter.SHOW_ELEMENT),<\/code>
            b;<\/code>
        while (t.nextNode()) {<\/code>
            b = t.currentNode.getBoundingClientRect();<\/code>
            if (b.right > w || b.left < 0) {<\/code>
                t.currentNode.style.setProperty('outline', '1px<\/code>
    dotted red', 'important');<\/code>
                console.log(t.currentNode);<\/code>
            }<\/code>
        };<\/code>
    }(document));<\/code>
    <\/li>\n\n\n\n
  6. Scroll up and down the page to find the elements highlighted in red. <\/li>\n\n\n\n
  7. Edit your page with Elementor and adjust those elements to fix.\u00a0<\/li>\n<\/ol>\n\n\n\n

    For further information, refer to the following articles:<\/p>\n\n\n\n