Media queries, handier than you think

A lot of people are using media-queries of late to do full site changes to rework an entire page—or set of pages—based on a screen-size; from mobile through iPad, to 800×600, up to more ‘modern’ sizes. They can however have much more humble (but equally, if not more, nifty) applications. Here I’ll share with you just two such applications I used recently on a real site.

To begin, head to suzannahaworth.com.

First off, have your browser (if possible) at a resolution of 1024×768px. You should see the main content (<body>) is centered in a 960GS layout. I support 1024×768 as the smallest desktop screen-size. The code is simply:

body{
	width:940px;
	padding:0 10px;
	margin:100px auto 0 auto;
	...
}

Now size your browser up to 1280×1024px if you are able to. You should see that the main content (<body>) is 150px from the top of the screen and 100px from the left. I chose the arbitrary values to give the page a non-centered layout which was my ideal look. The code for this:

/*------------------------------------*\
	WIDE VERSION
\*------------------------------------*/
@media (min-width: 1100px){
body{
	margin:150px 0 0 100px;
}
}

As simple as that.

The other thing, and the one I like most, is the sidebar. With a resolution 1024×768px or above, visit the site and scroll the page. The sidebar is fixed, right? Now make that something more like 1024×500px and scroll, the sidebar scrolls too!

I’m quite fond of this effect but unfortunately at certain screen sizes (such as my netbook) the sidebar runs off the page and can’t be viewed because it won’t scroll. This has always stopped me using fixed positioning much, until I had the idea to use CSS to say ‘if the screen is big enough, give it position fixed, otherwise let it scroll!’

The default code is:

#sub-content div{
	position:fixed;
	width:220px;
}

Which is overwritten (if applicable) by this:

/*------------------------------------*\
	SHORT VERSION
\*------------------------------------*/
@media (max-height: 540px){
#sub-content div{
	position:static;
}
}

It really is that simple!

So there you have it, media queries aren’t just for major grunt and massive amounts of donkey work; small snippets can adapt the tiniest bits of your site to add changes where necessary, meaning you can preserve the features you want whilst not sacrificing the experience in situations where those features won’t work!

Tweet Follow @csswizardry

By Harry Roberts on Tuesday, December 21st, 2010 in Web Development. Tags: CSS, Media Queries | 6 Comments »

6 Responses to ‘Media queries, handier than you think’

Ted Goas said on 21 December, 2010 at 6:37 pm

Nice example! Now that we’re over the whole “CSS media-queries = Mobile site” misunderstanding, lots of people are using media queries in great ways.
Daniel Filler said on 21 December, 2010 at 6:49 pm

Excellent post. While IE8 and below do not support media queries to my knowledge, it shouldn’t matter so long as your default width supports 1024 resolutions. Gotta love progressive enhancement!
David Johansen said on 23 December, 2010 at 6:44 pm

Thanks! I was just working on a project for work that needs
this exact setup. I’m not very great with css, so I was going about
that fixed sidebar in a much uglier fashion. This will work
great.
Andrew Shanley said on 25 December, 2010 at 8:16 pm

@Daniel Filler you could try using a bit of JS such as this jQuery plugin http://www.protofunc.com/scripts/jquery/mediaqueries/ – this will help step in for IE6-8 lack of media query support. I’ve used it in my last two projects (e.g. http://www.kiranowal.com/) and although there’s a very slight lag for the script to kick in, it seems to work quite well.
Dan Hannigan said on 11 February, 2011 at 10:03 pm

Sorry if this isn’t what you normally handle… but I was able to get features like this to work on a regular site, but when moving into a Wordpress site – nothing seemed to come through. I’ve googled a lot, and they all want me to use a plug-in, which I can’t stand… anyways…

Any tips/tricks to make this work on Wordpress installs, or am I just being a dumbass and need to look it over?
Dan Hannigan said on 11 February, 2011 at 10:14 pm

Scratch that – I am an idiot, and fixed it. Sorry!

6 Responses to ‘Media queries, handier than you think’

Leave a Reply