Elements off the grid - disabling horizontal scroll


I’ve got a page, that has set grid of 1170px. On that grid, I have flexbox with left side div on 50% and the right side is an image, that goes beyond that 50% and even beyond my real estate at 1440px.

The problem I have, is that the page will now scroll right even though I don’t want it too. I want the part of the image to be hidden on my screen and only visible to those with bigger monitors.

Here’s an image

I have set overflow:hidden to body, but that makes page unscrollable. What can I do to solve it?


Have you considered hiding the overflow for the section?

1 Like

I have, but I have section set as 1170px wide. So making overflow hidden just cuts everything on the right off. Or am I missing something?

Go ahead and post your share link so we can take a look! :+1:

Here it is, I’ve deleted some irelevant stuff so it’s only bone left.


Okay — got it! Put all your content in a div block, and then set that overflow to hidden.


Thanks a ton, you’re a master :smiley: Is this a solution all pages with similar functionality use, or just a nice hack around it? (i’m cool with it tho)

Glad it worked! It’s one of many routes to take, but I’d say it’s fairly standard way to approach situations where you don’t want the overflow to affect horizontal scroll.