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?

That I didn’t mention did I ? Nope not really

  1. If you’re editing something on Desktop make sure you reset to “0” on Tablet and mobile or add value on Tablet and Mobile responsive mode. 
  2. Sometimes it is best to use “%” or “em” or “rem” over (px) pixel value.

Why do I write these tutorials?

Recently I had a problem with my popular blog posts – sticky header with elementor was due to Commento.io comment ( script) and cause me a headache and took me around 1 to 2 hours to fix the issue.

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

How causes horizontal scroll? (How to find the Culprits)

  1. Elementor’s Custom positioning: If you use lots of Elementor’s custom positioning features to place your content all around for design purposes on your website. Just make sure you reset it to zero (0) on Mobile and tablet.
  2. Images do not have max-width.
  3. Sometimes embedded does this too like Google Adsense (fixed one)
Various ways to solve them elegantly using Elementor.
  1. Responsive Design Begins and Ends With Correct Planning.
  2. In this business, no one in their right mind would set off on a project without a plan, a draft or sketch. The more forethought and planning you can invest in the design process, the better you will be able to anticipate the technical problems and adjust your ideas accordingly.
  3. Positioning Elements for Mobile Responsive View
  4. When it comes to correctly positioning sections for mobile responsive view, we suggest avoiding setting values in pixels. Setting values in per cent (%) or in EM keeps them relative to the overall screen size. Thanks to the responsive mode, we were able to conclude that we should set the padding to 17% either side of the text widget, in our next example, so that we get similar positioning in both desktop and mobile view.
  5. Responsive Design: A Horizontal Approach
  6. Traditionally, web design is a vertical process, which is why many designers prefer to complete the design of the entire page for a single device before, trying to make the same design work as well on the next device. An easier way to go about this is to design our views horizontally, one section at a time, across all our devices as we go along.

Process

Step: 01. Open Chrome Developer (Dev) Tools

This is the first step, we need to do in order 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 that nobody mention.

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 –

  • 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: 02. 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: 03. Troubleshooting with Outlines

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


*, *::before,*::after
{ outline:1px solid red; }

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

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

CSS outline

Helping other problems & give feedback:

We don’t have any access to your visitor’s website but we can find the errors that cause it and give feedback.

Please watch the vide –

Use JavaScript to debug

Yes, you can do it with JavaScript without going to Elementor’s Editor and I got it from ElementHow.

You will get full tutorials on how to implement the code in the video below.

				
					// 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));
				
			

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

If my blog post really 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