There are narrow screen CSS problems I often email people because of.\ These three (and a half) fixes should be enough for most. assets/easy-fixes.png A huge “EASY FIXES” writing, with letters freely floating around. \ In between them, a human is squeezing through, stretching a hand down. \ Below, there’s a wrench floating, and it’s likely what the human is stretching for. \ Around them, there are more instruments (construction ruler, screwdriver, pliers, hammer) floating, \ and attributions to “ARTYOM” and “AARTAKA.ME” IMAGE_ALT

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!)

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.

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 three (and a half) of my life-hacks for small viewport adaptation, matching the three most problematic HTML elements:

Preformatted (<pre>) Block Scrolling

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: 

0001011000000111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110100001011000000111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111010000101100000011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110100001011000000111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111001110011100111010000010

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

The fix is easy: 

pre {
    overflow-x: auto;
}

This overflow-x value means:

Check out the fixed code block above 👆

Images (<img>) and Their Width

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:

A really long decorative image with footprints going going going going going right until there’s a person sitting on the floor in some colorful goo, covering their hands and splashing around them. They seem to have walked there, slipped, and ended up covered in this pink thing! But first you have to scroll for a long time to even get to this part!

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: 

img {
    max-width: 100%;
    height: auto;
}

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

Check out the fixed image above 👆

Tables (<table>), a World in Themselves

Ever visited the Space Jam website? Neither did I. But we still live with its legacy. No, not the space operas or whatever. Tables as markup.

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.

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 <div>! 

<div class=scrollable>
<table>
...
</table>
</div>

And apply overflow-x to it: 

.scrollable {
    overflow-x: auto;
}

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

Check out the fixed table above 👆

Word Breaking (use <wbr>!)

Bonus post-publication section! In case you care about accessibility and do large device-adapted fonts. 

font-size: large;
font-size: max(1em, 16px, 1rem);

You might inadvertently destroy the viewport with your vocabulary. Well, if yours is fancy and includes German compound words. (Neunmilliardeneinhundertzweiundneunzigmillionensechshunderteinunddreißigtausendsiebenhundertsiebzigfache 👻)

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.

The solution is more involved than a CSS property, unfortunately: use <wbr> 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.

Another option is using a &shy; (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.

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

p {
    overflow-wrap: anywhere;
}

These are three (+ a half) 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 🩷