mybigadventures.com

. . . hello from Amsterdam, today we went to the Heineken Experience where we got the chance to see how a beer bottle lives. Looked awesome! Lots of rattling, zipping around conveyer belts, and then wiggling into boxes where you get to sleep for a while, then you get cracked open to momentarily enjoy the party before getting tipped down some drunkards throat, awesome no?

Anyways Amsterdam is rather nice, and the weather hasn't let us down with lots of sunshine again! Its very scenic here with lots of old buildings and such like. Tomorrow we go to Bruges in Belgium for a few days before finishing off the trip in Paris hopefully including a trip to Euro Disney! For those that are familiar with the planned route you may have noticed a few changes, we were supposed to finish in Amsterdam but accomodation has been a bit troublesome.

Anyways that'll have to be all, internet time is heavily limited here, see you all very soon - only 9 days left I think .  . .cheerio ta ta

. . . sadly folks the end of the trip is fast approaching, much faster than we had infact anticipated and now we find ourselves with just Paris to go. This is only a short one as we still have packing and showers left to go and checkout is in an hour . . . oh we're in Bruges (Belgium) by the way - I'm sure you'd all like it here - its very nice. We have now uploaded the rest of our photos including Strasbourg, Amsterdam and here. Hope the sun is as shiny there as it is here. Catch you all very soon, 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.