By Artyom Bologov

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

The name of my favorite Kpop singer

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

Fix it!

The fix is easy:

pre {
overflow-x: auto;
}

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!)
• and if it doesn’t overflow, then just proceed as regular

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:

Fix it!

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;
}

Fix to images occupying too much horizontal space

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.

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	css3-ui
Specification title	CSS Backgrounds and Borders Module Level 3	CSS Box Model Module Level 3	CSS Cascading and Inheritance Level 3	CSS Color Module Level 3	CSS Generated Content Module Level 3	CSS Fonts Module Level 3	CSS Generated Content for Paged Media Module	CSS Template Layout Module	Media Queries	Media Queries Level 4	Multi-column Layout Module Level 1	CSS Paged Media Module Level 3	CSS Fragmentation Module Level 3	Selectors Level 3	Selectors Level 4	CSS Basic User Interface Module Level 3 (CSS3 UI)
Status	Candidate Rec.	Recommendation	Recommendation	Recommendation	Working Draft	Recommendation	Working Draft	Note	Recommendation	Candidate Rec.	Candidate Rec.	Working Draft, and part migrated to css3-break	Candidate Rec.	Recommendation	Working Draft	Recommendation
Date	Feb 2023	Apr 2023	Feb 2021	Jan 2022	Aug 2019	Sep 2018	May 2014	Mar 2015	Jun 2012	Dec 2021	Oct 2021	Oct 2018	Dec 2018	Nov 2018	Nov 2022	Jun 2018

Fix it!

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>

Wrapping a table into a scrollable div

And apply overflow-x on it:

.scrollable {
overflow-x: auto;
}

Special class for scrollable containers

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

Check out the fixed table above 👆

These are three problems I’m hoping you viscerally felt with me just now. And three 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 🩷

Leave feedback! (via email)