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

  • kishorchand
  • Elementor Page Builder, Freebie
  • November 13, 2019
  • Join the Conversation
  • Modified 1:39 pm

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

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)

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.

03

Troubleshooting with Outlines

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.

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.

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