My last update made this site render better on small screens, but didn't look right on Android. It looks like the problem is that mobile browsers do weird things on the assumption that website developers are idiots (generally a valid assumption). MDN has an article about how to fix it.
You add something like this:
<meta name="viewport" content="width=device-width, initial-scale=1">
This tells the browser that it should set the viewport width to the actual size of the browser and don't scale anything.
In general, setting that would be a bad idea, since it would make everything tiny, so I updated this site to do all measurements in em's, and then made the default font size 1em. It's possible that this would have been fine with my old font size of 16px, but this seemed like a more interesting challenge.
While I was at it, I also add a media query so if the browser window gets small enough that we start scaling the content div, it removes the top and bottom margins. Those margins make the site look nicer in a big window, but they look really bad if there's no side margins.
/* Don't add margins at the top and bottom if the screen is tiny */
@media (max-width: 55em) {
#banner {
margin-top:0;
}
#contentinfo {
margin-bottom:0;
}
}
Now the site looks exactly how I wanted it to on Firefox and Chrome on my phone. Send me an email if it looks bad on your browser.
Note: I made absolutely no effort to make this look good on old versions of Internet Explorer, since they're not capable of making secure SSL connections, and I didn't see the point of supporting broken browsers.