Remix.run Logo
▲ dofm 7 hours ago

The screenshot does not scale to fit, so you get a horizontal scroll.

It's not the end of the world.

But as it goes, not everyone has the motor control to _only_ scroll a phone view vertically; unexpected horizontal scroll can be frustrating, especially when one very wide element leaves the screen otherwise confusingly blank elsewhere on the page.

(I've actually witnessed this frustration from an older user in real life)

▲bagatelle 2 hours ago | parent | next [-]

Author here, I don't personally use my phone to access websites often, so I forget to check on things like this. My bad! I'll take a look into it when I get a chance.

▲strenholme 7 hours ago | parent | prev | next [-]

Having horizontal scroll is annoying, yes, but I don’t think it makes a website unusable on a mobile device.

The way to handle elements wide enough to induce horizontal scrolling is to put them in a <div> (or make CSS for the tag in question) and make CSS with overflow-x: scroll; for just that element. An example from one of my webpages:

  pre {max-width: 90vw; overflow-x: scroll;}
▲dofm 7 hours ago | parent [-]

> but I don’t think it makes a website unusable on a mobile device

For you :-) Now imagine you have to use a mobile device but have limited control over your hands, and it's difficult for you to do a vertical scrolling gesture without some horizontal drift.

I've seen this in real life. Why not make things easier for that person when you can? Accessibility is for everyone. (General accessibility rule I like — if it's a persistent minor annoyance for me, it's possibly a dealbreaker for someone with an accessibility requirement I've not thought of)

Your suggestion for constraining horizontal scroll to unavoidably overflowing elements is good, though — I do that too, and I've ended up figuring out how to add affordances so it's clear that scroll is possible (shadows that appear and disappear)

▲SoftTalker 4 hours ago | parent | prev [-]

If I have to zoom on mobile, I go straight to Reader mode. If that doesn't work, I close the page.