mybigadventures.com

Happy birthday, Dad! Hope you had a lovely day at Bistro Pierre and wandering around Leamington Spa.xx

So I thought it was about time mybigadventures became a bit more mobile. When I recently re-designed the site I didn't think much about making everything work on smaller devices and having checked the website on my mobile this was pretty clear. The site looks great on my laptop where it has mostly been viewed but on smaller devices the text is too small and thtere's just too much going on. I didn't really want to start from scratch and make a mobile site so I went for a much faster and simpler solution using CSS media queries.

If you haven't used CSS queries before they're essentially a set of rules that you can add to the CSS to control when certain CSS styles should be applied. What this means in practice is that you can add media queries to test the width of the browser used to view your site and change the size of your content accordingly. In my case, to make the site more mobile friendly, at certain page widths I hide some of the content and increase the font size. The code looks a bit like this:

@media (max-width: 1199px) {
     p {
         font-size:140%;
     }
}

All this will do is if the browser width is less than 1200 pixels, it will increase the font size by an additional 40%. Simple! You can see this in practice if you're viewing the site using a destop or laptop computer. Just resize the browser window to make it smaller and watch the layout change. The downside of course is that because some of the content is simply hidden, it doesn't stop the device you're using from downloading it (so you're downloading content you'll never see). It also currently means that some of the content that enables you to interact with the website is currently unavailable (viewing anything other than the most current blog, logging in, adding comments). 

It's certainly far from perfect but it'll do the job for now.    

The weather has finally picked up a bit - just in time to wish you a very happy birthday!