Hyperspecific bugfix notes in transit from the past: Blogger CSS

While trying to increase line spacing to improve accessibility for this blog, I ran into an interesting series of issues. I'm recording the solution here in case I need it again or on the off-chance that it helps someone else.

For things on the Blogger platform (like this blog), you can choose a theme separately for desktop and mobile, or have the desktop page served to mobile. If you have a custom theme like I do, and you want to have a nice responsive mobile version of the site, then Blogger (behind the scenes) apparently takes the custom theme, runs it through some arcane processes, and spits out a mobile version.

So I encounter the following timeline of problems:

1. The theme is partially customisable in Blogger settings but to make real changes (in this case, to the line height) you have to dive into the CSS/HTML. I took a web design course more than a decade ago, so I am rusty. It takes some time just to find out how to get in there.

2. I notice that I can fix the line height in the CSS using (go figure) line-height, but the change doesn't propagate to mobile. It looks like the .mobile tag doesn't do anything. Say I change the line height to an absurd 100×. It looks absurd on desktop. I simulate a mobile device in a desktop browser by popping "?m=1" at the end of the URL, and it looks absurd there. On an actual mobile device, it's unchanged.

3. I deviate from proper CSS and get lost in an endless maze of <b:if cond='data:mobile'> or possibly <b:if cond='data:blog.isMobile'> or <b:if cond='data:blog.isMobileRequest'>, none of which help.

4. I get frustrated and go poke at the custom fonts instead.

5. It turns out the mobile view ignores custom fonts – again, only on an actual mobile device.

6. At first I think it's a caching problem on my phone, but changing font colours and banners and things works fine.

7. A search turns up this helpful article. It's a web safe font problem. My desktop browser recognises the custom title font I chose on a whim in Blogger settings (Molengo), but my phone browser doesn't. But! I just need to make the CSS load the font and add a line wherever it's needed and then it changes for mobile too.

8. ...It turns out that the google font called 'Molengo' looks completely different to the built-in Blogger font called 'Molengo' which I selected, so my nice font choice is broken on both desktop and browser. Not too big a problem; the google font version is okay and now I know how to make it work on mobile, so I leave it as is.

9. Back to trying to increase the line height.

10. It slowly occurs to me that a 'web safe font' problem is explicable but a 'web safe line spacing' problem is not plicable at all. That means there is an unrelated issue.

11. I google for more answers, get none, and start googling ever more tangentially related search keys and scrolling through increasingly unrelated answers. I try "@media only screen and (max-width: 600px)" instead of .mobile, and again certain test changes take effect on my phone and certain others don't. I can change colours and backgrounds and all sorts of things, but not certain font facets.

12. Finally an answer to a question about I don't know pineapples or something reminds me that !important is a thing. I try it, on a whim. The line spaces change.

13. I eventually work out that something, somewhere, is (re?)setting my line spacing (and a few other things, like font size and letter spacing) on mobile. Either those values are being overwritten by the Blogger post-processing step, or possibly I am an idiot and mobile-only elements buried elsewhere in the stylesheet are taking precedence due to CSS specificity values or something like that. The latter would seem more likely prima facie, except that I searched the CSS for a long, long time and could not find any trace of conflicting elements.

14. Whether it's the one reason or the other, I don't have a better solution than using !important. So I copy the formatting I want from throughout the stylesheet, duplicate it, and slap it inside .mobile tags with !important added on each line. Why go out of my way to do it that ugly way? Because !important is slightly scary and if it breaks something in the future (and I forget about this bugfixing session) then the fact that the blog will break on mobile and not on desktop may make tracking down the problem faster.

So, attention future me: If you need to futz around with this again, start by scrolling to line 554 of the CSS.