Media Queries

I made a small change to the HTML and CSS to try to render a bit better on phones. Even though the text is all resizeable and reflowable they rendered at some massive resolution and then scaled down - making the text unredable and non-reflowable. Sigh.

Anyway, first I added:

      <meta name='viewport' content='width=device-width, initial-scale=1'>
    

But this made the text too big and interfered with the table-like layout. I tried using a width of 800 which sort of worked but wasn't very readable either.

So I added a media query and adjusted some of the main sections and the borders and so on. It's just a quick and dirty but it works better than it did. I've only tested on one phone so others may not have changed.

    /* bloody phones */
    @media (max-width: 480px) {
        div#site-menu, .tag-menu {
            float: none;
            width: 100%;
        }
        .post-footer, .post, .post-header {
            margin-right: 1em;
        }
    }
  

On the other hand i'm lucky to get one visitor per week (lots of crawlers, and plenty of hacking attempts) so who really cares eh?