How To Prevent The Horizontal Scroll Issue In Divi Tutorial by Pee Aye Creative

How To Solve The Horizontal Scroll Issue In Divi

In this tutorial I will show you how to solve and prevent your content from having a horizontal movement scroll effect issue in Divi.
Categories: Tutorials
Divi Responsive Helper Plugin 2.0 by Pee Aye Creative

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

What Is The Horizontal Scroll Issue In Divi?

The issue we are referring to can appear in couple different ways. Sometimes users see a horizontal scrollbar appear at the bottom. This is added by the browser because some content is too wide for the screen. Others do not see any scrollbar, but notice the site moves sideways when scrolling. This is especially common on mobile devices when scrolling with your finger and you are able to move the content left and right on the screen.

This issue is occurring because something is making the page container larger than the browser window. It is usually caused by an element being wider than its container so it hangs off the edge of the page. There is a possibility that the content of your website may cut off or be hidden.

Whichever type of issue you face, it simply should not be happening! It does not look good. It can confuse users and makes the site feel broken and unprofessional.

What Is Causing The Horizontal Scroll Issue In Divi?

Now that you have a description of the issue, let’s consider some possible causes for why this is happening. Unfortunately it not always one specific common reason, but rather several possible scenarios which have been know to cause it.

Common Causes

  • Often this is caused by margin, padding, and sizing that has not been properly optimized for Tablet and Phone devices sizes. Due to these settings, the elements may be overflowing the browser viewport.
  • The menu dropdown submenus are another thing to check. These can sometimes be off the side of the screen.
  • The navigation menu could be too wide for the page.
  • I’ve even heard of a logo being too wide and there wasn’t enough space for it.
  • There could be some width or min-width issue in the Sizing settings in a module, row, or section.
  • I’ve read of cases where an animation was causing it, due to the movement beyond the container.
  • If you are adding advanced custom styling to Divi in general. Sometimes you want to achieve a specific effect but overlook this issue.

Let me know what I missed and I will update the list!

Solutions To The Horizontal Scroll Issue In Divi

Find The Cause

There are some quick solutions, but it would be wise to at least try to identify what is causing the issue first. The key here is that something is causing the problem. The ideal solution will always be to find the element or code or setting and undo the cause. Easier said than done!

Solutions

There are several solutions, but it all depends on the cause. Without knowing the cause it’s pretty hard to give a specific solution. So the next steps are to review the common causes and then take some action on those.

A great place to start is to simply load on your phone, and also on desktop. Use the responsive tools in your browser to check for anything obvious. 

When you are inside the Visual Builder, change the responsive views back and forth between Desktop, Tablet, and Phone. Notice anything odd? If you do, open some of the sections, rows, and modules and check the sizing, width, padding, and margin settings. To make it easy, you can use the filters and choose Responsive Styles/Content to see only the settings that have been modified on Tablet and Phone. You can also choose to filter by Modified Styles in general, as the issue may not be specific to the responsive settings..

filter Divi settings

If you narrow it down to some row, column, etc. but do not have any settings wrong, you can solve this by opening the element and going to the Advanced tab to the Visibility toggle and setting the Horizontal Overflow to Hidden.

Divi overflow hidden setting

The alternative to the Divi setting is to add “overflow: hidden;” in the Main Element of the section, row, column, or module that is the culprit.

Solve It With A CSS Snippet

If the above methods fail, you can always use CSS. This snippet targets the body element and sets the horizontal overflow to hidden and the position to relative. It should work in most cases. I can’t guaruntee it will every time, but it is the best way I know of to handle this.

If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on Where To Add Custom Code In Divi.

/*prevent horizontal scroll on mobile*/

@media all and (max-width: 980px) {
	html,
	body {
		overflow-x: hidden;
	}
	body {
		position: relative
	}
}

Do It With A Setting!

Make life easier and use the Divi Responsive Helper instead, the ultimate Divi responsive toolkit with awesome features and settings to help make your website look and work great on all devices!

Divi Responsive Helper Plugin 2.0 by Pee Aye Creative

To remove the horizontal scroll issue in Divi with our plugin, simply go to the WordPress Dashboard to Divi>Theme Options and click on the Divi Responsive Helper tab. Locate the Miscellaneous tab within the options and there you will see the setting called Prevent Horizontal Scroll. Simly enable this toggle with one click and the horizontal scroll will be solved on your website.

prevent horizontal scroll with the Divi Responsive Helper plugin
3
Last updated Aug 31, 2021 @ 9:24 am

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.
Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

2 Comments

  1. Gil Poulsen

    Hi, Nelson. I just encountered this today after reading your blog post yesterday, and it turned out that my issue was a dropdown menu that was close enough to the right side of the viewport to cause the entire page to “allow” for the width of the menu links even if it wasn’t active (showing the dropdown links). In my case I just moved that menu item over to the left and swapped it with one that had no dropdown links, although that doesn’t seem to be a true “fix.”

    Anyway, thank you for covering this as it gave me an idea of where to look, and your CSS snippet did fix it so I could show my clients the site this morning, but it was bugging me so I removed the CSS and made sure I figured out what was going on.

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Asset 7

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Divi Tutorials On YouTube

Our videos have views! Join subscribers and enjoy over video tutorials!

Visit Our Channel

Recent Posts

Pin It on Pinterest

0

Your Cart