Hacker News Reader

Comment by elefantastisch | Hacker News Reader

It's a shame how few of these prevent horizontal scroll on mobile. Usually the table and/or video are not probably handled. My take away from this: Simple does not mean easy; check edge cases.

View on HN

As suggested by a sibling comment the key isn't to prevent horizontal scrolling, but to prevent content from overflowing a single screen width. Which isn't hard per se but doesn't have a one-size-fits-all solution.

So many websites overflow a single screen width by a trivial amount. This is just enough to cause accidental horizontal scrolling which disrupts the flow of scrolling the page. Very frustrating!

Yep. The offenders are usually really long un-line-breakable words, images, or videos. In this case we have:

  href="https://newcss.net/theme/terminal.css">

Which is not being allowed to break to a new line because it doesn't contain whitespace. A CSS rule can be used to allow it to break, though that can also have other, unwanted ramifications.

It's not super easy either. I ran into this also (https://doc.sscaffold-css.com/ysk/tables/) and the root cause is that the <table> element is not considered to be either a block-level or an inline element. It's special, and because it's special, some browsers support setting max-width on it and some don't. So tables need a container element or some other kind of special handling. It's an easy bug to overlook because the cause is so unexpected.

It's a tricky problem. I've been battling with it on MVP.css (https://andybrewer.github.io/mvp/) but I think I found a good solution for responsive tables with some help from the community.

I'm probably gonna use your solution. Thanks.

I'm also interested in your tables solution. Also, is there an organized MVP.css community somewhere?

Feel free to ask questions or contribute on GitHub: https://github.com/andybrewer/mvp

As someone who constantly runs into mobile pages with poorly fitting content yet are still scroll-limited, I see this as a welcome feature.

Most mobile browsers seem to lock the scroll direction while moving anyway, so atleast it isn't sloppy in practice, imho

I use a browser that locks the scroll direction and pages which overflow horizontally drive me mad. If your website does that, I will search for the reading mode button immediately because I cannot really work with handling scrolling in two directions.

Reply on news.ycombinator.com