Horizontal Scroll Bar Divi on Laptops

I was working the other day on a Divi website and I had this irritating problem. There was a horizontal scroll bar whenever I looked at the website on a laptop. Very irritating.

What to do?

I opened up my trusty Chrome Dev tools and just started randomly deleting elements on the page to see if the scroll bar went away.

Deleted the footer. Nope. Bar still there.

Deleted the main content. Nope. Bar still there.

Deleted the navigation bar. Bar disappeared. Aaaaaaahaaaaaa. Et voila. To be super duper clear, the exact element that I deleted was #et-top-navigation.

So, now that I narrowed down the element that was the problem I figured, meh, let’s just add a overflow-x: hidden; to the parent #page-container. But, that was kind of the lazy approach. I wanted to really figure out what was the problem.

Just kidding. I was totally going to go with the adding the overflow-x to the #page-container, but – as I was finalizing that change and wrapping things up I just happening to notice something. It sprang up and almost hit me right in the face. I was shocked. Awestruck. Amazed. There it was. Right in front of my face.

The last item in the menu (the one all the way to the right) had a sub-menu that was pushing off to the right of the screen. Sorry, that’s not the technicalistic of terms, but – you get the gist.

I added this css to make it all better.


@media (max-width: 1320px) {
#top-menu > li:last-child .sub-menu {
right: 0;
}
}

Instead of the last sub-menu aligning to the left and pushing off to the right, I made the sub-menu align to the right and my problems all went away. Well, not all my problems. I have a myriad of other problems, but alas, css can’t fix those. Too bad.

And to top it off… I went ahead and added the overflow-x: hidden; to the #page-container, you know, just…cuz – I could.

Arrivederci ya’ll…

Leave a comment

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