3 ms·

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

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.

petee 6y ago
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
- saagarjha 6y ago
  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.
_bxg1 6y ago
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.
- chongli 6y ago
  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!
  - _bxg1 6y ago
    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.
- thaumaturgy 6y ago
  It's not super easy either. I ran into this also (https://doc.sscaffold-css.com/ysk/tables/ 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.
awb 6y ago
It's a tricky problem. I've been battling with it on MVP.css (https://andybrewer.github.io/mvp/ https://andybrewer.github.io/mvp/) but I think I found a good solution for responsive tables with some help from the community.
- iagovar 6y ago
  I'm probably gonna use your solution. Thanks.
- tpoindex 6y ago
  I'm also interested in your tables solution. Also, is there an organized MVP.css community somewhere?
  - awb 6y ago
    Feel free to ask questions or contribute on GitHub: https://github.com/andybrewer/mvp https://github.com/andybrewer/mvp

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.

petee 6y ago

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

saagarjha 6y ago
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.

_bxg1 6y ago

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.

chongli 6y ago
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!
- _bxg1 6y ago
  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.
thaumaturgy 6y ago
It's not super easy either. I ran into this also (https://doc.sscaffold-css.com/ysk/tables/ 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.

awb 6y ago

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

iagovar 6y ago
I'm probably gonna use your solution. Thanks.
tpoindex 6y ago
I'm also interested in your tables solution. Also, is there an organized MVP.css community somewhere?
- awb 6y ago
  Feel free to ask questions or contribute on GitHub: https://github.com/andybrewer/mvp https://github.com/andybrewer/mvp