Time to do something about it
Media QueriesI really did not want to do a massive revamp of the site, so I'm just going to describe what I changed.
Basically the site is using a classical three columns structure, with some navigation tags on the left and right sides, and the actual content in the center.
Page widthI added some @media entry to override the class elements used for the three columns so they get shown vertically instaead of side by side on narrow screens:
On narrow screens (vertical A4 screen), mobile device
we switch to a vertical layout.
@media screen and (max-width : 1080px)
This has also an interesting side effect: It makes the blog more comfortable to read on a normal PC screen rotated to be in vertical position.
Font sizeThe second change was that the font was too small on high dpi screens (like tiny mobile phones or 4k/retina devices), I solved (I hope) that with another simple media query applying some changes on the top container:
Double size font on high density screens
@media (-webkit-min-device-pixel-ratio: 1.5)
What's nextObviously that's not enough, but I'm going to first see if this works sufficiently well on most devices.
The next step is to restyle the tags and other clickable elements so they are more spaced out to be easier to click on with fat fingers.