# 📎 Easy (Horizontal Scrollbar) Fixes for Your Blog CSS
By Artyom Bologov <aartaka.me>

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

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 (#pre)

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:

===================================  blc id=fix-pre ===================================
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:

  ===================================  css ===================================
  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 (#img)

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>

<assets/easy-fixes-img.png> (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:

  ===================================  css ===================================
  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 (#table)

Ever visited the Space Jam website <www.spacejam.com/1996>?
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.

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

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

  ===================================  html ===================================
  <div class=scrollable>
  <table>
  ...
  </table>
  </div>
  ==================== Wrapping a table into a scrollable div ====================

  And apply `overflow-x' to it:

  ===================================  css ===================================
  .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>!) (#wbr)

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

===================================  css ===================================
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 <https://learn-german-easily.com/longest-german-word id=fix-wbr> 👻)

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:

  ===================================  css ===================================
  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 🩷


CC-BY 4.0 <creativecommons.org/licenses/by/4.0> 2022-2026 by Artyom Bologov (aartaka).
Any and all opinions listed here are my own and not representative of my employers; future, past and present.