Trying out CSS3 media queries with a fixed width layout

Since my post about CSS3 media queries, I figured I should use these methods in a real life example. Rather than testing on a client’s site (ahem), I thought it might be better to try CSS3 media queries on this blog first – so that’s what I have done. If you resize your browser window to less than 480 pixels (or view this website on a mobile phone), the layout will change to what, I hope, is a more friendly layout for smaller devices, especially mobile phones.

This is the first attempt and I hope my modified style sheet can be improved as I learn more about CSS3 media queries and the style rules that are most sensible in these cases.

Stunning CSS3: A Project-Based Guide: Use this book to work through a series of practical yet cutting-edge projects. Each chapter walks you through standalone exercises that you can integrate into projects you’re working on, or use as inspiration.
» Buy from Amazon.com · Amazon.co.uk

Rather than go through every single style sheet edit that I made, I want to concentrate on a few changes. In particular, what to do about large images and the use of :before or :after pseudo elements to add content that will replace a large header image. Replacing or adding content like this should be used cautiously in my opinion so any comments about this are welcome.

Let’s go then! Firstly, I put my style declarations inside an @media rule like this:

@media all and (max-width:480px) {
<--- styles go here --->
}

This means that devices where the screen width is less than 480 pixels will use the rules inside this block. There are other criteria I might have used here but I used this because I want browsers to adapt to the same changes (partly so I can test it on my PC).

Now for the header image (the image with website title and hands holding present). It’s quite large in its dimensions and I am using a fixed pixel width image. Yes, there are methods for making images more flexible in liquid/fluid layouts but my layout is fixed width and I am ‘retrofitting’ the new style sheet rules to make the layout more appropriate for smaller widths/resolutions. So, in this case, I decided to not display the image in the #head <div> using this CSS:

#head img, img[width*="550"] { 
	display: none;
}

I also know that some articles (for example, this one) have lead images (used more for decoration than anything else) that are 550 pixels wide so I use an attribute selector to hide images of this width. I can do this safely because I know that these images are not critical for reading the posts.

For the #head image, I now have a problem because the <h1> and <a> tags that wrapped the image are empty in my 480 px layout. This was the HTML.

<h1><a href="http://www.cvwdesign.com/txp/" rel="home">
<img src="http://www.cvwdesign.com/txp/images/160.jpg" width="740" 
height="300" alt="CVW Web Design Blog - Hands With Present" /></a></h1>

If the image is set to display: none, I won’t have any <h1> header text or a link to click on. After some thought, I used this CSS to insert content into the place that was previously occupied by the image:

h1 a:after{  
	content: "CVW Web Design Blog";
}

To my understanding, it does not matter if I use :after or :before here since I am just inserting content into an ‘empty’ place. Only my 480 pixel layout users will see this of course.

I have some slight reservations about inserting content in this way. After all, we should be separating content and structure from style. For the moment, I am going with this. There may be a better solution. I freely admit to experimenting here!

Note: I have used other rules in my media query block for the rest of the layout and I will explain these in another post.

That’s it! Let me know if you have better ways of treating large images in media query style sheets. Happy to hear them.