.TH easy-fixes 7
.SH NAME
easy-fixes \- Easy (Horizontal Scrollbar) Fixes for Your Blog CSS
.SH AUTHOR
Artyom Bologov
.SH SYNOPSIS
There are narrow screen CSS problems I often email people because of. These three (and a half) fixes should be enough for most.
.SH TEXT


.P
So it often happens that I find some blog post.
A fun one.
A freaky one.
A profound one.
A critical (in the sense of Critical Science, not everyday criticism!)

.P
And then I see my arch nemesis: The Horizontal Scrollbar.
Creeping in when no one sees, on smallest screen widths.
(I have an iPhone SE and a small 13-inch laptop with x2 UI scaling.)
Making the website interaction much less pretty than it might’ve been.

.P
So I took up a torch and decided to write this up for y’all.
None of us can’t know everything about making blog posts more accessible to small viewports.
So let’s share the knowledge.
Here are four of my life-hacks for small viewport adaptation, matching the three most problematic HTML elements:

.SH Preformatted (<pre>) Block Scrolling

.P
We programmers list a lot of code snippets in our blog posts.
And, living in a post-VT100 era, we don’t usually care about line length.
Which is totally fine.
But it often results in long code blocks overflowing the viewport and causing horizontal scrollbars:
.P

.P
.in +4n
.EX
0001011000000111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110100001011000000111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111010000101100000011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110100001011000000111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111010000010
.EE
.in
.P
— The name of my favorite Kpop singer (hint: she’s a certified freak, ten days a week 🎵)

.P
Yeah, Binary Lambda Calculus be like that sometimes.
Believe me, I can’t read it myself, especially with this scrollbar!

.B Fix it!
.EX
.P
The fix is easy:

.P
.in +4n
.EX
pre {
    overflow-x: auto;
}
.EE
.in
.P
— Fix to overflowing pre-formatted blocks

.P
This \fBoverflow-x\fP value means:

.P
* if the code block overflows (horizontally, thus the \fBx\fP,) let’s add a scrollbar to it (and not the surrounding page!)
.P
* and if it doesn’t overflow, then just proceed as regular

.P
Check out the fixed code block above 👆
.EE

.SH Images (<img>) and Their Width

.P
I was unable to contact htmx website maintainers, but oh are they guilty of that.
The images on htmx blog are not properly sized and “escape” the viewport regularly.
Something like:
</p>


.B Fix it!
.EX
.P
HTML images are scaled to their original width and height by default.
So huge images are likely to overflow and cause dreadful scrollbars.
This is solvable by capping image width to the size of its container:

.P
.in +4n
.EX
img {
    max-width: 100%;
    height: auto;
}
.EE
.in
.P
— Fix to images occupying too much horizontal space

.P
This is usually enough as a baseline.
Add your fancy image placement on top in peace!

.P
Check out the fixed image above 👆
.EE

.P
Bonus point: this seems to be a problem for videos too.
So watch your \fBmax-width\fP there too!

.SH Tables (<table>), a World in Themselves

.P

.UR https://www.spacejam.com/1996
Ever visited the Space Jam website
.UE
?
Neither did I.
But we still live with its legacy.
No, not the space operas or whatever.
\fITables as markup\fP.

.P
Tables were abused for markup on the early Internet.
And we still have to deal with the suspicion that table layouting is Turing-complete.
Or at least pray the next table doesn’t destroy the page.

.EX
Sorry, typesetting this table in formats other than HTML is pure pain.
I’ll get back to it someday.
Maybe.
.EE

.B Fix it!
.EX
.P
There’s no single-property fix to tables stretching too far.
But one solution (that always works in webdev, right?) is to wrap the table into a \fB<div>\fP!

.P
.in +4n
.EX
<div class=scrollable>
<table>
...
</table>
</div>
.EE
.in
.P
— Wrapping a table into a scrollable div

.P
And apply \fBoverflow-x\fP to it:

.P
.in +4n
.EX
.scrollable {
    overflow-x: auto;
}
.EE
.in
.P
— Special class for scrollable containers

.P
I mean, this \fB.scrollable\fP can be reused in more places, so it’s a net positive?

.P
Check out the fixed table above 👆
.EE

.SH Word Breaking (use !)

.P
In case you care about accessibility and do large device-adapted fonts.

.P
.in +4n
.EX
font-size: large;
font-size: max(1em, 16px, 1rem);
.EE
.in
.P
— CSS properties for more accessible fonts

.P
You might inadvertently destroy the viewport with your vocabulary.
Well, if yours is fancy and includes German compound words.
(
.UR https://learn-german-easily.com/longest-german-word id=fix-wbr
Neunmilliardeneinhundertzweiundneunzigmillionensechshunderteinunddreißigtausendsiebenhundertsiebzigfache
.UE
 👻)

.P
The problem with long no-delimiter words: they are not broken by default in HTML.
So using longer words can overflow the viewport and cause the miserable horizontal scrollbar.

.B Fix it!
.EX
.P
The solution is more involved than a CSS property, unfortunately: use \fB\fP HTML tag.
Put it in the middle of the offending word to allow the browser to line-break it.
(Use your linguistic judgement on where to meaningfully break the line.)
Your mobile users will thank you for that.

.P
Another option is using a \fB&shy;\fP (soft hyphen) entity, but that has less coercive power.
And using (structured and semantic) tags is preferable over using Unicode if you’re in a browser land.

.P
I mean, there’s a CSS solution too, but it’s not pretty to language semantics:

.P
.in +4n
.EX
p {
    word-break: break-word;
    overflow-wrap: anywhere;
}
.EE
.in
.P
— I don’t recommend this CSS solution, but who am I to judge you if it removes the horizontal scrollbar?
.EE

.P
These are four problems I’m hoping you viscerally felt with me just now.
And the solutions I personally use and suggest to fellow bloggers.
Hopefully we’ll come out of it with less tolerance to horizontal scrollbars.
Test your website on smaller screens and tread carefully 🩷


.SH COPYRIGHT

.UR https://creativecommons.org/licenses/by/4.0
CC-BY 4.0
.UE
 2022-2026 by Artyom Bologov (aartaka,)

.UR https://codeberg.org/aartaka/pages/commit/a91befa
with one commit remixing Claude-generated code
.UE
.
Any and all opinions listed here are my own and not representative of my employers; future, past and present.