Skip to Main Content Skip Table of 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 issues on Mobile in the Future

  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 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 is an amazing feature built-in that enabled 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 didn’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.

What people will suggest?

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

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

    Picture showing there is a side scrolling issue on Mobile

    After:
    After applying the overflow hidden to the body tag now sidebar scrollbar is not visible and you cannot 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 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 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 pro version) 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.

        
        //Code from ElementHow posts Full code

(function(debug){
   var w = debug.documentElement.offsetWidth,
       t = debug.createTreeWalker (debug.body, NodeFilter.SHOW_ELEMENT),
       b;

while (t.nextNode()) {
b = t.currentNode.getBoundingClientRect();
if (b.right > w || b.left 

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