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

How to prevent horizontal scroll on Mobile?

  1. If you’re adding value on the 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 will be inherited by 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)

Stories

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

The issue was caused by Commento.io ( 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 would 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 is an amazing feature built-in that enables us to move the elements around the pages without writing any single line of CSS code but if you apply the style on the Desktop and don’t reset the value on the tablet or mobile devices this can cause a horizontal scrolling issue. So, You need to watch out.

Elementor Custom Positioning

  1. Sometimes embedded code, injected JS can cause Horizontal Scrolling issues on mobile devices, for example, Google Adsense code (fixed one), in my example, it is commento script for comment.
  2. Outdated or wrong critical CSS can cause FOUC that can create horizontal scroll on both desktop and mobile devices.

What people will suggest?

Use overflow hidden on the body tag

Use Overflow-x: hidden This is the most one of the most commonly suggested answers and sometimes it fixes most of the issues.

  1. Before: the scrollbar is visible before applying the overflow hidden CSS property.

Picture showing there is a side scrolling issue on Mobile

  1. After: After applying the overflow hidden to the body tag now scrollbar is not visible and you cannot scroll at all. If some valuable elements are present, you will miss them.

Fix the overflow issue with CSS but unable to scroll

Enabled Section/ Container’s Overflow settings

Some people will suggest using the Section/ Container – Overflow settings, this is an in-built that is good for some specific situations.

But do not apply this setting to your header because your dropdown menu and the sub-menu will not expand even though you have added a higher z-index.

What are the issues?

  1. Sub-menu is hiding behind the header template when hovering.

Overflow hidden CSS property causing issue on navigation menu

  1. The Dropdown menu is 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 page.

Right click on any page and click the inspect elements

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.

Toggle Device Toolbar to toggle Mobile devices

Watch the video below ⇓

Step 3: Troubleshooting with CSS: The console.log() of 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 advanced plan) or you can also use your theme customizer – custom CSS area too.

    
*{
    outline: 1px solid red;
}
    

This will look like this when you apply the CSS.

 

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 the 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.

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 time for them. Because Sharing is caring.

If you found this tutorial helpful you can support me by buying me a cup of coffee, sending via PayPal, or buying the products from my store-
  1. Buymecoffee
  2. PayPal or
  3. Buy products from my store
Thank you.