Easy (Horizontal Scrollbar) Fixes for Your Blog CSS
Easy (Horizontal Scrollbar) Fixes for Your Blog CSS
By Artyom Bologov
Oh, I see you disabled JavaScript.<br>Keep up the good work, my fellow cleanweb person!
Notice that there might be trace amounts of JS, used for e.g. runnable JS code blocks and interactive demos.<br>JS is not required for use of the website though, it’s only enhancing the existing functionality.
So it often happens that I find some blog post.<br>A fun one.<br>A freaky one.<br>A profound one.<br>A critical (in the sense of Critical Science, not everyday criticism!)
And then I see my arch nemesis: The Horizontal Scrollbar.<br>Creeping in when no one sees, on smallest screen widths.<br>(I have an iPhone SE and a small 13-inch laptop with x2 UI scaling.)<br>Making the website interaction much less pretty than it might’ve been.
So I took up a torch and decided to write this up for y’all.<br>None of us can’t know everything about making blog posts more accessible to small viewports.<br>So let’s share the knowledge.<br>Here are four of my life-hacks for small viewport adaptation, matching the three most problematic HTML elements:
Preformatted () Block Scrolling #
We programmers list a lot of code snippets in our blog posts.<br>And, living in a post-VT100 era, we don’t usually care about line length.<br>Which is totally fine.<br>But it often results in long code blocks overflowing the viewport and causing horizontal scrollbars:
0001011000000111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110100001011000000111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111010000101100000011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110100001011000000111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111010000010<br>The name of my favorite Kpop singer (hint: she’s a certified freak, ten days a week 🎵)
Yeah, Binary Lambda Calculus be like that sometimes.<br>Believe me, I can’t read it myself, especially with this scrollbar!
Fix it!
The fix is easy:
pre {<br>overflow-x: auto;<br>Fix to overflowing pre-formatted blocks
This overflow-x value means:
if the code block overflows (horizontally, thus the x,) let’s add a scrollbar to it (and not the surrounding page!)<br>and if it doesn’t overflow, then just proceed as regular
Check out the fixed code block above 👆
Images () and Their Width #
I was unable to contact htmx website maintainers, but oh are they guilty of that.<br>The images on htmx blog are not properly sized and “escape” the viewport regularly.<br>Something like:
Fix it!
HTML images are scaled to their original width and height by default.<br>So huge images are likely to overflow and cause dreadful scrollbars.<br>This is solvable by capping image width to the size of its container:
img {<br>max-width: 100%;<br>height: auto;<br>Fix to images occupying too much horizontal space
This is usually enough as a baseline.<br>Add your fancy image placement on top in peace!
Check out the fixed image above 👆
Bonus point: this seems to be a problem for videos too.<br>So watch your max-width there too!
Tables (), a World in Themselves #
Ever visited the Space Jam website?<br>Neither did I.<br>But we still live with its legacy.<br>No, not the space operas or whatever.<br>Tables as markup.
Tables were abused for markup on the early Internet.<br>And we still have to deal with the suspicion that table layouting is Turing-complete.<br>Or at least pray the next table doesn’t destroy the page.
Module css3-background css-box-3 css-cascade-3 css-color-3 css3-content css-fonts-3 css3-gcpm css3-layout css3-mediaqueries mediaqueries-4 css3-multicol css3-page css3-break selectors-3 selectors-4...