One of the reasons I chose the Rowling theme for my blog is that the demo showed it rendering well on mobile devices. It was quite important for me to have a blog which was accessible on phones, tablets and desktop computers.
In the Appearance > Customise menu WordPress gives you the ability to see how your website will render on different devices. This is really handy when you customise your CSS.
When I had finished customising my blog and just before I launched it I used this as a way to preview my blog to make sure everything looked OK.
When my site went live however the blog didn’t render correctly on any mobile phone and show blog posts two tiles wide instead of one.
I had to do a bit of digging in the style.css file to find out where it was going wrong.
It turned out that the @media rules weren’t configured properly. These media queries allow you to alter the style of your web page depending on the type of device being used to view it.
The media queries for the Rowling theme are triggered at the follow screen widths:
@media ( max-width: 850px ) {...}
@media ( max-width: 768px ) {...}
@media ( max-width: 600px ) {...}
@media ( max-width: 500px ) {...}
@media ( max-width: 400px ) {...}Apart from the break point at 768px these don’t appear to be common sizes according to this website. A break point of 400px is also very low and smaller than what most mobile phones display.
To fix the problem I incorporated all the CSS changes that occurred at the 400px break point into the 500px media query. Now when you view this blog on a mobile phone you see it as intended.
