Bluehost: Web hosting from $3.95/month. Sign Up

Trying out CSS3 media queries with a fixed width layout

Posted on by Clive Walker in CSS3

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.

Comments

  • 25 Jun 2010 09:03:03

    Certainly seems to work well. The good thing is that you’re not using a whole separate style sheet for a different screen size, just a few targeted styles.

    Hopefully, with Apple leading the way to incorporate up to date HTML and CSS other browsers will follow suit and we will soon be able to implement new code developments pretty much as soon as they are available.

Leave a comment

A simple question that helps prevent automated form fillers.

© 2016 Clive Walker