Streaming live at 10am (PST)

Elements off the grid - disabling horizontal scroll


#1

Hey!

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?

Thanks!


#2

Have you considered hiding the overflow for the section?


#3

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?


#4

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


#5

#6

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

https://preview.webflow.com/preview/debugcopy121?utm_source=debugcopy121&preview=e20b0c5b34244b052d82297bb2c6981a


#7

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

16%20PM


#8

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)


#9

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.