#OVERFLOW CSS HORIZONTAL SCROLL PRO#

Make the viewport narrower than is reasonable so it’s more obvious. If you have a really long page and can’t really figure out what the offending element is, try scrolling all the way to the right and scroll from the top to bottom and see if you can find any bits sticking out. Well, since you already have those Devtools open, that’s already starting on the solution, eh? A common cause is having items in your layout that are fixed width or have some min-width value that ends up larger than your viewport width at that point in time. Also, according to iOS resolution, even the iPhone 13 has a logical width of 390px, so dock those Devtools, I say.

#OVERFLOW CSS HORIZONTAL SCROLL PRO#

Or you could, I don’t know, ACTUALLY test on a narrow mobile device?įor what it’s worth, my phone is a Realme 3 Pro which is still happily chugging along, and it has a viewport width of 360px. So the tip here is, dock your Devtools for testing narrow viewports. If you dock your Devtools to the left or right of your viewport, then you can shrink the viewport down to near 0px if you really wanted to. That is, if you have your Devtools in a separate window. The last I checked, Firefox stops at 435px, Chrome stops at 500px and Safari stops at 559px. But did you test it at all?īut first, let’s go with the broad strokes situation of simply not testing at a narrow enough viewport. This is because there will inevitably be some edge cases where a trade-off needs to be made on whether to just let things be. Anyway, we thought it was worth a discussion, from why this phenomenon exists to how we can do our best to avoid it.Īs you can see, I have chosen the reasonably “loose” phrase “do our best”. Which is very different from intentional horizontal scrolling on mobile.

My good friend, Wei, has a pet peeve: unintended horizontal over-scrolling on mobile. So below, the “width” of our container will be 300px. The height of the container will become the “width” and vice-versa. These are arbitrary sizes they could be anything. In this example, our side-scrolling container will be 300px wide, with 8 items of 100×100px each. Make a, and make a bunch of child elements. Rotate the items back to correct-side up.Rotate the container 90 degrees counterclockwise so the bottom is to the right.The solution ended up being fairly straightforward: I was curious if it was possible to do in pure CSS.

There are, no surprise, numerous ways to do this in JavaScript. So the three most prominent product in each category were visible and less important products were still easily accessible. So we decided to split them up into three categories, each horizontally scrollable. Of course, their product catalog was way too big to put in a single view. The specific use case that led to me digging into this idea that a customer wanted to show all their products on a single slide. But if there’s one thing I like, it’s a challenge. This means we always have a struggle between the horizontality of presentations and the verticality of web technologies. Presentations are a very horizontal thing – usually slides have a 4:3 or 16:9 radius. That’s too bad, as at the company I work for this would be quite useful.

Unfortunately, that’s not going to happen. I’d be nice if we could do something like this: /* This isn't real */ But sometimes, you want to step away from the verticality of it all and do something crazy: make a horizontal list. You read a web site like you read a physical page: left to right, top to bottom.

Overflow css horizontal scroll