Section’s ‘Overflow-x:hidden’ not working

On this page https://vabs-clone.thewebsiteguardians.dev/ at the bottom, below the footer, there’s a scroll bar, so the page can scroll to the left, revealing blank space. I assumed this is because of the two carousel sliders on the page. To control the potential overflow I have added 'overflow-x:hidden !important; to the Dive Theme Options Custom CSS for the html and body elements and also to the Custom CSS main element for both sections containing the carousels. Normally this would work, but it’s it’s not, and it’s not working in any browser.

 

It’s also happening at on this page (has a testimonials slider which also has overflow-x:hidden; added to the section. About Us – Vacuum & blowing solutions | VABS Ltd (thewebsiteguardians.dev)

 

It is not happening on this page, which only has the single slider Products New – Vacuum & blowing solutions | VABS Ltd (thewebsiteguardians.dev)

 

This page has the two sliders that the home page has, but it doesn’t have the problem Font styling – Vacuum & blowing solutions | VABS Ltd ()

 

I have the same site setup on a local XAMPP server but the scrolling issue is not present. It’s really baffling.

 

How do I stop the side scrolling? What’s causing it? I’ve put controls on all of the elements that I thought might be creating the problem, but that’s not really proving to me that this is what the problem is.

 

If anybody can see what’s going on, I’d really appreciate it!

 

Cheers

Grant

If you wish to show us some support, consider subscribing to our Divi.Help Pro Membership to enjoy the below perks:

– Instantly access to all our premium Dive extensions, layout packs, Carousel AI Toolkit, Dive AI Generator & Dive Block – Pro version (Over $2150+ in value).

8th Anniversary Sale – Get Divi.Help Pro Membership @ $99/Lifetime only.

Further update to this, incase anybody is dealing with the same issue.

Although it worked as far as getting rid of the side scrolling action, this code ended up screwing up the Theme Builder for me (It was hiding most of the header).

#page-container {

overflow: hidden!important;

}

So I had to get rid of it.

On further inspection, the side scrolling behavior was caused by the header section which I had given ‘position: absolute’ and selected the center position in the module tool. Doing that assign attributes to the section CSS of left:50%; and transform:translateX(-50%)

Disabling the transform and changing left to left:auto; and adding right:auto; solved it.

So, solution was, reset the section in the sections module Advanced settings to position: default and added the absolute styles I wanted in the Custom CSS of Theme Options. This has worked and got rid of the scrolling issue.

Thanks to Pavel at Elegant Themes support for helping me solve this too!! Wouldn’t have got there without his help.

 

#4

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.