{"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-02-24T11:06:03","modified_gmt":"2026-02-24T09:06:03","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 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 () { const docWidth = document.documentElement.offsetWidth; [].forEach.call(document.querySelectorAll(\"*\"), function (el) { if (el.offsetWidth > docWidth) { console.log(el); el.style.outline = \"1px dotted red\"; } }); })();<\/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. <\/li>\n<\/ol>\n\n\n\n

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