Skip to Main Content

Prevent Horizontal Scroll on Mobile With 2 Methods

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

horizontal scroll on mobile

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 Desktop make sure you reset to “0” on Tablet and mobile or add value on Tablet and Mobile responsive mode or use Mobile Approach. It means you design mobile-first and then go up.
  2. Use relative value (“%” or “em” or “rem”) over (px) pixel value. Great for accessibility and readibility, relative value respect system font size (Adapt accordingly).

Stories

Recently, I had a problem with my popular blog posts – sticky header with elementor article. It was due to Commento.io comment ( script) causing horizontal scroll on mobile devices which can negatively reduce UX.

For me, it took like 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 didn’t reset the value on Tablet and Mobile 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 it will fix the issue but what if there is an important element hidden.
    Before:
    Picture showing there is a side scrolling issue on Mobile
    After:
    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 – Overflow settings, this is an in-built feature that is good for certain situations.

    But do not apply this setting to your header because your mobile navigation or Hamburger menu will not expand even though you have added a z-index.

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, we open Chrome Dev tools by right-clicking on any elements and clicking the inspect elements.

If you only have one then it is easy to fix but if you have multiple then it is difficult to do.

Follow the step (watch the video below) –

  • Right-click with your mouse on any element on the page and select Inspect to jump into the Elements panel or
  • Press Command+Option+C ( On Mac) or Control+Shift+C (Windows, Linux, Chrome OS)

Step#2: Toggle device toolbar to view your site in responsive mode

While on Developer mode 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 Outline property

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

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 Advanced – Custom CSS.

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

After you add this CSS it will outline every element and make it easy to figure out which elements cause the issue. (see the attachment below)

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

Helping others problems by providing feedback:

When someone posts an issue related to the horizontal scrolling on mobile on the forum we tend to help them without thinking twice.

Since we don’t have any access to their website but we do have dev tools to look around and this is the video you need to watch to identify and help them.

What you going to find out ::before and ::after pseudo-elements and inject the outline CSS.

Please watch the video –

Use JavaScript to debug

CSS is not only the issue you can also debug with JS too.

My friend at ElementHow shows you how to implement with JS and it is pretty neat.

				
					<!--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 < 0){
    t.currentNode.style.setProperty('outline', '1px solid red', 'important');
console.log (t.currentNode);

}

};

} (document));
				
			

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

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

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.