Skip to Main Content

3 Easy Steps to Fix The Horizontal Scroll On Mobile

In this tutorial, we are going to discuss how to troubleshoot and prevent Horizontal Scroll on Mobile just by using CSS and JS with easy 3 steps fast

horizontal scroll on mobile

After you have finished creating a website and you didn’t realize you have horizontal scrolling on mobile devices.

Prevent Horizontal Scrolling issue on Mobile in Future

  1. If you’re adding value on Desktop, just make sure you reset the value to “0” on Tablet and mobile responsive devices or adjust the value on Tablet and Mobile.- Desktop: 20px padding on all sides is set up.
    Desktop Padding is set up
    Tablet: Desktop value(padding) is inherit to tablet devices.
    Desktop value is inherit to tablet Devices
    – Mobile: Desktop value is also inherited to Mobile devices
    Desktop value is inherit to Mobile Devices
  2. Use relative value (“%” or “em” or “rem”) over (px) pixel value. Great for accessibility and readability. (watch the video below)


Recently, I had a problem with my popular blog post – Elementor Sticky header article.

The issue was caused by ( script) which leads to horizontal scroll on mobile devices. It took about an hour to figure out what the real issue was and fix it.

From that incident onwards, I thought I will never let that happen to any one of you reading my article because I don’t want you to go through those processes again.

Causes of Horizontal Scroll on Mobile

  1. Elementor’s Custom positioning: Elementor’s Custom Positioning has an amazing feature built-in that enabled us to move the elements around the pages without touching any single line of CSS code but if you apply your style on Desktop and didn’t reset the value on the tablet or mobile devices this can cause a horizontal scroll issue. So, You need to watch out.

Absolute position

  1. Sometimes embedded code can cause Horizontal Scroll on mobile devices like Google Adsense (fixed one), in my example, it is commento script.

What people will suggest

  1. Use Overflow-x: hidden : This is the most common suggested answer and it is terrible. When you apply overflow-x: hidden, this will hide the scrollbar and most likely fix the issue, but what if an important element is hidden?Before:
    Picture showing there is a side scrolling issue on Mobile
    After applying overflow hidden to the body tag now you will not be unable to scroll at all.
    Fix the overflow issue with CSS but unable to scroll
  1. Some people will suggest using the Section/ Container – Overflow settings, this is an in-built feature that is good for some specific situations.But do not apply this setting to your header because your mobile navigation or Hamburger menu and sub-menu will not expand even though you have added a higher z-index.

    You can see some of the examples below-

    — Sub-menu is not expanding when hovering.
    Overflow hidden CSS property causing issue on navigation menu

    –Hamburger menu is also not expanding
    Hamburger menu is not expanding because overflow hidden enabled

Process of debugging

Step#1: Open Chrome Developer (Dev) Tools

This is the first step, we need to figure out why we have a horizontal scroll on Mobile devices.

To do so, open Chrome Dev tools by right-clicking on any elements and clicking the inspect elements to inspect the details of the page.

If you only have one, it is easy to fix, but if you have multiple, it isn’t easy to do.

Step#2: Toggle the device toolbar 

While you’re on Developer mode, Now, toggle the Device toolbar (see video) and set it to Responsive mode so we can drag around the window and see what elements cause the issue.

Step#3: Troubleshooting with CSS:

Watch the video properly.

Here is the CSS you need to add to the Custom CSS area ( It is only available to the Elementor pro version) or you can use your theme customizer – custom CSS area too.

    outline: 1px solid red;
CSS outline

*  in CSS means – All elements ( Universal Selector ).

When you apply the CSS, it will select everything on the page and give an outline in red. It doesn’t matter where you add it.

Most likely it will be under the Advanced tab – Custom CSS area.

If you don’t have the Pro version you need to go to theme customizer i.e. Appearance – Customize – Additional CSS.

Remember to remove the outline when you’re done. ( See screenshot & watch the video below) because it is quite distracting.

(Alternative Method) Use JavaScript to debug

CSS is not only the way to debug and fix the issue.

My friend at ElementHow shows you how to implement with JS and also you can create a bookmark.

        //Code from ElementHow posts Full code

   var w = debug.documentElement.offsetWidth,
       t = debug.createTreeWalker (debug.body, NodeFilter.SHOW_ELEMENT),

while (t.nextNode()) {
b = t.currentNode.getBoundingClientRect();
if (b.right > w || b.left < 0){'outline', '1px solid red', 'important');
console.log (t.currentNode);



} (document));

Thank you, Andre Morre for the correction on the Elementor’s Forum (depreciated).

Now choose whichever method you prefer and let me know in the comment below.

If my article helps you find your issue, please let me know in the comment section below I would love to hear from you.

Please share this post with your friends this might save huge time for them. Because Sharing is caring

If you found this tutorial helpful and want to support me here are my links-

  1. Buymecoffee
  2. PayPal

Best wishes

Thangjam Kishorchand

Thangjam Kishorchand

Hi there, this is my place where I write about my Elementor tips and tricks that I learned for the last 2 years. I am mostly active on Quora and Facebook. I love messing around with design trends like Variable Fonts, Dark Mode

Powered by Elementor pro

This site is powered by Elementor pro : Theme builder and it contains Affiliate links,which means that if you buy from my links, Foxscribbler will earn a small commission.This commission comes at no additional cost to you.

Scroll up further to Load all the comments...