Tweaking CSS for mobile

When creating this blog I hacked together a quick style, but it is not quite mobile friendly, so let's fix that.

What did I do wrong?

When hacking together the style, I wanted to set a maximum width for the content, and I wanted to move the content to the center of the screen. I did not want to spend time googling how to do this so I set a hardcoded padding-left on the body, which is the offending part of the CSS that breaks mobile. So, in short, don't do this:

body {
    margin: 0px;
    padding-left: 50px; /* this is the offender */
}

div {
    max-width: 900px;
}

Instead, do this:

body {
    margin: 0px;
}

div {
    max-width: 900px;
    margin: auto;
}

An aside, text justification

When writing documents I always prefer to turn on text justification on paragraphs. So I turned it on for paragraphs, but on mobile it just does not look very well. My guess would be because there are not enough words on a line for the algorithm to play with. So instead, I've added justification behind a media query, so it's only active on screens wider than 600 pixels:

@media only screen and (min-width: 600px) {
    p {
        text-align: justify;
        text-justify: auto; 
    }
}

Let's try it for a while :-)

Code

Changes can be viewed here