@media queries added

First attempt with @media queries after being inspired at this year’s Web Directions.

It’s still pretty basic, but it works (mostly). You drag the width of your supported browser (Safari for example) until it’s a bit less than the 960px grid used here, and the sidebar will drop down to below the content as the whole design takes on a fluid width.

Try it and see!

Here’s the css code, in may cases overwriting an existing style (so put this at the bottom of your stylesheet):

/***************************************************************
 *
 * For skinny screens XD
 *
 ***************************************************************/
@media only screen and (max-width: 960px), only screen and (max-device-width: 480px) {
	.outer {
		width: 100%;
	}
	.widthlimiter {
		width: 100%;
	}
	#menu{
		width: 100%
	}
	#content{
		width: 90%;
		float:none;
		margin:0 auto;
	}
	#sidebar{
		width:90%;
		float:none;
		margin:0 auto;
		padding:0;
	}
	body.home #content {
		width: 100%;
		padding:0;
	}
	#cta1, #cta2, #cta3{
		margin: 0;
	}
	div#content div.cta {
		width:90%;
		float: none;
		margin:5px auto;
	}
}

Now, there is a trick to getting your iPhone to display this at a nice, readable width. You’ll need to add this line to your head:
<meta name=”viewport” content=”width=device-width, minimum-scale=1.0, maximum-scale=1.0″ />

Once you have done that, you’ll end up with something like this:

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s