Easy (Horizontal Scrollbar) Fixes for Your Blog CSS

By Artyom Bologov 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”

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

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!

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
Summary of main CSS module-specifications from Wikipedia (transposed for length)

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

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);
CSS properties for more accessible fonts

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.

Fix it!

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;
}
I don’t recommend this CSS solution, but who am I to judge you if it removes the horizontal scrollbar?

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 🩷

Leave feedback! (via email)