Skip to Main Content

How to’s Troubleshoot & Prevent Horizontal Scroll effects on Mobile with 2 easy methods Fast

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.

How to find out the culprit that causes Horizontal Scroll?

  1. Elementor’s Custom positioning: Elementor’s Custom Positioning has an amazing feature built-in that can move the elements around without touching any single line of 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.

 

Process of debugging

Step#1(A): Open Chrome Developer (Dev) Tools

This is the first step, we need to do to figure out why we have a horizontal scroll in Mobile devices. To do that open your Developer tools (most prefer Chrome).

People will constantly tell you to add overflow-x: hidden to the body to fix the problem sometimes it does fix the problem but what about the important stuff hidden because of overflow property.

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#1(B): 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#1(C): Troubleshooting with Outlines property

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


*
{
 	outline: 1px solid red;
}

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

Select everything on the page and give an outline of 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.

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

CSS outline

Helping other problems & give feedback:

When someone posts something about the horizontal scroll issue 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 mess 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 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