How to’s Troubleshoot and Prevent Horizontal Scroll in Mobile with 2 easy methods Fast

In this tutorials we are going to discuss how to troubleshoot and prevent Horizontal Scroll in Mobile just by using CSS and JS with easy 4 steps really fast
prevent horizontal scroll in mobile
After you have finished creating a website and didn’t realize we have horizontal scrolling on mobile devices. How to troubleshoot and prevent horizontal scroll in mobile? There are two ways to troubleshoot error – one with CSS and another one with JavaScript. Let start troubleshooting and figure it which one causes the issue –

How to Prevent Horizontal Scroll in Mobile from Happening again ?

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

  • If you’re editing something on Desktop make sure you reset to “0” or add value on Tablet and Mobile responsive mode.
  • Sometimes it is best to use “%” or “em” or “rem” relative value instead of pixel value.

Recently I had a problem with on my most popular blog post – sticky header with elementor was due to Commento.io  comment and cause me around 1 to 2 hours minimum to fixed the issue.

 

From that incident i don’t you to get in trouble like i did that is why i created this blog post with silent small video included.

 

I feel your pain and this small small video might solve your issue really fast Good Luck

How to’s Troubleshoot and Prevent Horizontal Scroll in Mobile with 2 easy methods Fast 1
Play Video

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 percent (%) 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.
  7. If you messed around with Custom Positioning on Desktop first reset everything on Tablet and Mobile then readjust again.

01

Open Developer (Dev) Tools

This is our first step we need to do in order to figure it out why we have horizontal scroll in Mobile devices. To do that open Dev tools

 

People will tell you to add overflow-x to hidden to the body sometime it fixed the problem but what about the important stuff you have 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 –

  1. Right-click on any element on the page and select Inspect to jump into the Elements panel.
  2. Press Command+Option+C ( On Mac) or Control+Shift+C (Windows, Linux, Chrome OS)
open chrome dev tools
Play Video

02

Toggle device mode to responsive

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

Toggle Device Toolbar
Play Video

03

Troubleshooting with Outlines

troubleshooting with outlines
Play Video

Here the CSS solution you need to add to the Custom CSS area ( Only available to Elementor pro version) or you can use Theme Customizer – custom CSS area too if you don’t have Pro version yet but better get it because you’re losing so many good features from Pro version.

  1. *{
  2. outline:1px solid red;
  3. }

*  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 like it will be under Advanced – Custom CSS. If you don’t have 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 it out which elements cause the issue. Remember remove outline when you’re done.

Troubleshooting with Outlines
Play Video

04

Helping other problems & give feedback:

Since we don’t have any access to their website, we can find the errors and give feedback.

Same page – Open Developer tools – Click any DOM to see every element – scroll down and find pseudo:: after element then paste the CSS provided above.

How to’s Troubleshoot and Prevent Horizontal Scroll in Mobile with 2 easy methods Fast 2
Play Video

What about JavaScript? I got that cover too. I got it from < Elementor Codes > & you will get full tutorials on how to implement the code.

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

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

If my Blog post really help you finding your issue, please let me know on the comment section below i would love to hear it from you.

 

if you can please share it to 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 free tips and tricks that I learned for the last 2 years. I am also a Blogger. I am mostly active on Quora and Facebook. And i love implementing new CSS.

Read More

Powered by Elementor pro

This site is powered by our Favorite Theme builder Elementor pro and it contains Affiliate links,which means that if you buy, Foxscribbler will earn a small commission.This commission comes at no additional cost to you.