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 by Pee Aye Creative 2.3

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!


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) {
	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 by Pee Aye Creative 2.2

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

Last updated Aug 31, 2021 @ 9:24 am


Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy


  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.

  2. Hridoy Hasan

    Exact solution thanksss alott Sir

  3. gil

    Hi, Nelson. One more thing on this I just noticed, that if you have horizontal motion Scroll Effects enabled, and your scroll start is outside of the viewport, either left or right, that will cause this issue to occur. I guess it’s sorta obvious in that the browser has to allow for that extra content outside of the viewport, but that’s a super-easy fix. In this case, your code snippet did not work ;-(

    • Hemant Gaba

      Hey Gil,

      Could you please share the URL of the page where I can check the mentioned issue and investigate it further?

  4. Blah Blah Co.

    This was just what I needed.

    However, when I turn my mobile phone sideways… it leaves a lot of space at the bottom when I turn it back vertical. The Horizontal scroll is fixed but how do you fix the vertical?

    Happens on this website:

    I’m definitely gonna check out your plugin!


    • Hemant Gaba

      Hey There!

      The URL you have provided is not working on our end. Could you please check it and send it again?

  5. Jemma Pollari

    Thanks, this helped me solve the problem on my site. I didn’t use the snippet but I identified that it was my global header causing the issue, so in Theme Builder I used the overflow settings of the whole header to switch it to hidden on the x-axis. Thanks for the clue what to look for.

  6. Caleb Harris

    Hey there, we have the responsive helper and both solutions worked, however they caused another problem. When horizontal scroll is hidden it makes scrolling normally on a page stick and sometimes more than not won’t let you scroll further. Is there a way to fix this and keep the mobile version from having that horizontal scroll issue?

  7. MainP

    Nice thanks for the video and info. I have the overflow problem on a row with slide in animations. I cant restrict them on mobile so i had to use this. Thanks for everything keep doing it

    Best regards P


Submit a Comment

Your email address will not be published.

Recent Posts


Your Cart