Screen resolution nowsaday ranges from 320px (iPhone) to 2560px (large monitor) or even higher. Users no longer just browse the web with desktop computers. Users now use mobile phones, small notebooks, tablet devices such as iPad or Playbook to access the web. So the traditional fixed width design doesn’t work any more. Web design needs to be adaptive. The layout needs to be automatically adjusted to fit all display resolution and devices. This tutorial will show you how to create a cross-browser responsive design with HTML5 & CSS3 media queries.

View Demo Responsive Design

Download Demo ZIP

See It in Action First

Before you start, check the final demo to see how it looks like. Resize your browser to see how the layout automatically flows based on the width of the viewport (browser viewing area).


More Examples

If you want to see more examples, check out the following WordPress themes that I designed with media queries: Tisa, Elemin, Suco, iTheme2, Funki, Minblr, and Wumblr.


The page’s container has a width of 980px which is optimized for any resolution wider than 1024px. Media query is used to check if the viewport is narrower than 980px, then the layout will turn to fluid width instead of fixed width. If the viewport is narrower than 650px, it expands the content container and sidebar to fullwidth to form a single column layout.



I’m not going to go through the details of the HTML code. Below is the main structure of the layout. I have a "pagewrap" container that wraps the "header", "content", "sidebar", and "footer" together.

<div id="pagewrap">

	<header id="header">

			<h1 id="site-logo">Demo</h1>
			<h2 id="site-description">Site Description</h2>

			<ul id="main-nav">
				<li><a href="#">Home</a></li>

		<form id="searchform">
			<input type="search">

	<div id="content">

		<article class="post">
			blog post

	<aside id="sidebar">

		<section class="widget">

	<footer id="footer">


Note that I use HTML5 markup in my demo. Internet Explorer prior than version 9 doesn’t support the new elements introduced in HTML5 such as <header>, <article>, <footer>, <figure>, etc. Including the html5.js Javscript file in the HTML document will enable IE to acknowledge the new elements.

<!--[if lt IE 9]>
	<script src=""></script>


Reset HTML5 Elements to Block

The following CSS will reset the HTML5 elements (article, aside, figure, header, footer, etc.) to block element.

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
    display: block;

Main Structure CSS

Again, I’m not going to get into the details. The main "pagewrap" container is 980px wide. Header has a fixed height 160px. The "content" container is 600px wide floated left. The "sidebar" content is 280px wide floated right.

#pagewrap {
	width: 980px;
	margin: 0 auto;

#header {
	height: 160px;

#content {
	width: 600px;
	float: left;

#sidebar {
	width: 280px;
	float: right;

#footer {
	clear: both;

Step 1 Demo

Here is the design demo. Note that the media queries haven’t been implemented yet. Resize the browser window and you should see that the layout is not scalable.

CSS3 Media Query Stuffs

Now here comes the fun part — media queries.

Include Media Queries Javascript

Internet Explorer 8 or older versions doesn’t support CSS3 media queries. You can enable it by adding the css3-mediaqueries.js Javascript file.

<!--[if lt IE 9]>
	<script src=""></script>

Include Media Queries CSS

Create a new stylesheet for the media queries. Check out my previous tutorial to see how media queries work.

<link href="media-queries.css" rel="stylesheet" type="text/css">

Viewport Smaller Than 980px (Fluid Layout)

For viewport narrower than 980px, the following rules will apply:

  • pagewrap = reset width to 95%
  • content = reset width to 60%
  • sidebar = reset width to 30%

Tips: use percentage (%) value to make the containers fluid.

@media screen and (max-width: 980px) {

	#pagewrap {
		width: 95%;

	#content {
		width: 60%;
		padding: 3% 4%;

	#sidebar {
		width: 30%;
	#sidebar .widget {
		padding: 8% 7%;
		margin-bottom: 10px;


Viewport Smaller Than 650px (One-Column Layout)

Next I have another set of CSS for viewport narrower than 650px:

  • header = reset height to auto
  • searchform = re-position the searchform to 5px top
  • main-nav = reset the position to static
  • site-logo = reset the position to static
  • site-description = reset the position to static
  • content = reset the width to auto (this will make the container to expand fullwidth) and get rid of the float
  • sidebar = reset width to 100% and get rid of the float

@media screen and (max-width: 650px) {

	#header {
		height: auto;

	#searchform {
		position: absolute;
		top: 5px;
		right: 0;

	#main-nav {
		position: static;

	#site-logo {
		margin: 15px 100px 5px 0;
		position: static;

	#site-description {
		margin: 0 0 15px;
		position: static;

	#content {
		width: auto;
		float: none;
		margin: 20px 0;

	#sidebar {
		width: 100%;
		float: none;
		margin: 0;


Viewport Smaller Than 480px

The following CSS will apply if the viewport is narrower than 480px which is the width of the iPhone screen in landscape orientation.

  • html = disable text size adjustment. By default, iPhone enlarges the text size so it reads more comfortably. You can disable the text size adjustment by adding -webkit-text-size-adjust: none;
  • main-nav = reset the font size to 90%

@media screen and (max-width: 480px) {

	html {
		-webkit-text-size-adjust: none;

	#main-nav a {
		font-size: 90%;
		padding: 10px 8px;


Flexible Images

To make the images flexible, simply add max-width:100% and height:auto. Image max-width:100% and height:auto works in IE7, but not in IE8 (yes, another weird IE bug). To fix this, you need to add width:auto\9 for IE8.

img {
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */

Flexible Embedded Videos

To make the embedded videos flexible, use the same trick as mentioned above. For unknown reason, max-width:100% (for embed element) doesn’t work in Safari. The work around is to use width:100% instead.

.video embed,
.video object,
.video iframe {
	width: 100%;
	height: auto;

Initial Scale Meta Tag (iPhone)

By default, iPhone Safari shrinks HTML pages to fit into the iPhone screen. The following meta tag tells iPhone Safari to use the width of the device as the width of the viewport and disable the initial scale.

<meta name="viewport" content="width=device-width; initial-scale=1.0">

Final Demo

View the final demo and resize your browser window to see the media queries in action. Don’t forget to check the demo with the iPhone, iPad, Blackberry (newer versions), and Android phones to see the mobile version.

final demo


  • Media Queries Javascript Fallback:
    css3-mediaqueries.js is required to enable media queries for browsers that don’t support media queries.

    <!--[if lt IE 9]>
    	<script src=""></script>
  • CSS Media Queries:
    The trick for creating an adaptive design is to use CSS to override the layout structure based on the viewport width.

    @media screen and (max-width: 560px) {
    	#content {
    		width: auto;
    		float: none;
    	#sidebar {
    		width: 100%;
    		float: none;
  • Flexible Images:
    Use max-width:100% and height:auto to make the images flexible.

    img {
    	max-width: 100%;
    	height: auto;
    	width: auto\9; /* ie8 */
  • Flexible Embedded Videos:
    Use width:100% and height:auto to make the embedded videos flexible.

    .video embed,
    .video object,
    .video iframe {
    	width: 100%;
    	height: auto;
  • Webkit Text Size Adjust:
    Use -webkit-text-size-adjust:none to disable text size adjust on the iPhone.

    html {
    	-webkit-text-size-adjust: none;
  • Reset iPhone Viewport & Initial Scale:
    The following meta tag resets the viewport and inital scale on the iPhone:

    <meta name="viewport" content="width=device-width; initial-scale=1.0">



David Nemes
May 11, 2011 at 8:45 am

Wow very good article! ty

May 11, 2011 at 8:48 am

quality stuff…

which bit of the code keeps the images sharp all the time? Love to try this very soon..

thanks for sharing.. :)

Shaza Chua
May 11, 2011 at 8:50 am

Wow! This is great! Thank you for sharing this! I really really need this for my upcoming project.

Benjamin Reid
May 11, 2011 at 8:52 am

Really nice explanation – something we should all be doing now.

Nov 20, 2016 at 11:08 pm

rem very good

May 11, 2011 at 9:21 am

GBaniya, There is no code to keep the image sharp, it just resizes to 100%, if you want to keep the image sharp you have two or three versions of the picture and then swap them depending on viewport.. the downside to media queries. That is why image heavy websites tend not to use media queries.

May 11, 2011 at 9:40 am

Thanks very much for your reply. It helps. :)

Catalin Red
May 11, 2011 at 9:25 am

Lovely article and thanks for sharing! I enjoyed the “Media Queries Javascript” fallback part.

May 11, 2011 at 10:25 am

While media queries certainly work they’re not the best option for detecting mobile devices. Since a mobile device sits on a constrained pipe (slow) already having to download all the CSS for the regular site, then the CSS for it’s screensize is certainly slow. With this method you also end up downloading the full size images then they get scaled down. Basic web optimization says we serve the image size we need not larger images that are scaled down.

Server side detection of mobile devices is a much better option since you can then only serve the code specific to the device in question. Then if you want to query for specific landscape/portrait orientation go for it. You’d only serve the image sizes required by the device as well.

Media queries are great but only if they’re used properly by an informed developer.

May 11, 2011 at 10:43 am

Thank you so much for the elaboration. I’ve got slightly better understanding on the media queries. Now, I’m going to go google about it and get myself more well informed. :)

Kind Regards,

Joe Lambert
May 11, 2011 at 1:49 pm

Using services such as can help optimise assets for mobile sites whilst still using media queries.

Nick La
May 12, 2011 at 7:15 pm

Thanks for the link. Didn’t even know about it.

May 11, 2011 at 7:33 pm

Another option would be wouldn’t it?

Jon Glick
May 11, 2011 at 11:51 am

Besides the point that curtismchale made above, I always thought that media queries should be used based on when the screen gets larger. The mobile/basic version of the site is the default so that if the browser doesn’t understand media queries (besides IE, mostly a mobile issue) it gets the most basic version. Then, browsers that *get* media queries would have larger layouts available. Same techniques, different philosophy i guess.

Anyway, thanks for the concise write-up. I hadn’t seen “-webkit-text-size-adjust: none;” before!

May 12, 2011 at 12:34 pm

I’ve never thought about it that way but it’s not a bad idea. We could safely assume that larger screens are on faster connections where the extra downloads aren’t as big a concern. Sure it could be tethered to a mobile device but we’re still probably safe with the assumption.

Jumping off that assumption I think we’re probably pretty okay using media queries only to get screensizes.

Nick La
May 12, 2011 at 7:14 pm

Interesting.. I’ve got to try this idea.

May 11, 2011 at 12:10 pm

Thanks for the how-to! I especially appreciate knowing how you resize images for IE. And I love the way your nav menu jumps from the side to the top for this site on smaller screens. It’s really well done!

May 11, 2011 at 12:10 pm

This is a great tut. Thank you for going into it.

May 11, 2011 at 4:49 pm

Perfect tutorial! Ive been using alot of these techniques already, but I really found it useful seeing your comments on every line, explaining how and why they are used!

May 11, 2011 at 8:56 pm

The Less CSS Framework is trying to do very similar things:

May 12, 2011 at 12:38 pm

The LESS framework requires JS now though. JS is a blocker for downloads. We’re already sitting on a constrained pipe so I’d think we’d want to remove as much ‘required’ stuff as possible for the site to function properly.

I like the LESS framework way more when it was a rendered CSS library. All the benefits of variables and mixins without the JS requirements to bog it down.

May 11, 2011 at 10:48 pm

Can someone tell me the difference between, say, css3-media-queries.js, adapt.js, and respond.js ?

May 11, 2011 at 11:34 pm

I needed this! Thanks Nickla!

May 12, 2011 at 12:54 am

Why reinvent the wheel? As somebody said there is already css framework solutions like less framework and also less+

May 19, 2011 at 12:58 pm

Writing your own code is not reinventing the wheel. Reinventing the wheel in the context you describe would be if someone rewrote the LESS framework. The techniques here let you control how the code will work and gives you greater freedom than relying on another person’s solution. They also easy to implement and get you to think in more adaptive terms than you might otherwise. The LESS framework is a nice solution, but it shouldn’t be something that one must have to do what is discussed in the tutorial.

May 12, 2011 at 3:20 am

thanks for this helpful tutorial… again!

Jose Antonio Corachán
May 12, 2011 at 5:40 am

Great tutoria, specially the flexible images tip. You have save my day with that trick!!!

Also the idea os separate CSS for the Media Queries is quite nice. I will implement some of your ideas on my current work.


May 12, 2011 at 7:49 am

Nice article, however I’d use Andy Clarke’s awesome ‘320 and up’ template combined with Paul Irish’s HTML5 Boilerplate.

May 12, 2011 at 12:39 pm

Great, why is the important part which you didnt’ mention.

Nicolas Gallagher
May 12, 2011 at 9:08 am

Using -webkit-text-size-adjust:100% is “safer” –

An alternative to css3-mediaqueries.js is respond.js – . It acts as a min/max-width MQs polyfill and is only ~1K

May 12, 2011 at 10:32 am

Thanks for this tutorial. Like others have stated, there are numerous ways of rendering a website in order to adapt to each screen size, but the important thing here is that we learn different ways to do it. No matter which method we think is best one, there will always be an scenario on which we will need to adapt to. And all these mentioned methods will help us to do it.

HTML Codes Dude
May 12, 2011 at 2:14 pm

Awesome stuff. But I don’t understand why you would need the css3-mediaqueries.js? I don’t know any mobile or tablet you would be targeting that would be using IE? So why have the extra overhead?

Nick La
May 12, 2011 at 7:05 pm

The point of the media queries is not just for mobile. The purpose of media queries is to build an adaptive design that works on all browsers and screens.

May 12, 2011 at 11:25 pm

Thank you again for this tutorial .. I’ve been meaning to do this but didn’t know how to go about it .. This is gonna help me a lot..

May 13, 2011 at 2:37 am

one for the memory banks thanks

Djurica Bogosavljev
May 13, 2011 at 4:19 am

Great Tutorial, just what I need for redesign of my Porfolio web site! Will help me a lot. Thanks Nick for sharing this!

Vladimir Krasko
May 14, 2011 at 2:40 am

This is handy and similar to 978 grid switching. There is an issue with using the js files to render HTML5 and CSS3 in IE. There seems to be an issue when using both of those files together. Some of the elements don’t render (specifically the navigation). However using just the HTML5shiv.js file, the markup is rendered correctly. So there is an issue with how the CSS3 Media queres and HTML5shiv files work together, but this is an issue with the development with those libraries. Just giving a heads up of the problem.

May 14, 2011 at 12:08 pm

WOW…amazing.. :D

Peter Schreiner
May 14, 2011 at 8:42 pm

You’re the best dude!

Krsiak Daniel
May 15, 2011 at 1:45 pm

Thanks Nick,

great stuff to learn and master in time.

Best regards

slate tiles
May 16, 2011 at 1:56 am

very informative post thanks for sharing, extra ordinary and unique news

Maybray Digital
May 16, 2011 at 5:58 am

Ah, this is great stuff. Thank you and keep up the good work.

web sesign dubai
May 16, 2011 at 7:10 am

very useful website

May 16, 2011 at 8:09 am

Usefull as always. Thank’s
Best Regards

May 16, 2011 at 2:21 pm

Recommend which shows how to detect the orientation of a mobile site, in real time, as well

May 17, 2011 at 3:10 am

very nice “like”.
i had a problem with ie (of course).
compatibility view was on.
to bypass it i added

mabe there is something smarter that i dont know.

May 17, 2011 at 8:28 pm

Amazing and helpful tutorial. I’m looking foward to trying this out on a personal project I’m going to work on.

May 17, 2011 at 9:17 pm

thanks for this, very helpful

May 18, 2011 at 2:18 am

This tutorial helped me with a website I am designing, thanks a lot!

May 18, 2011 at 6:45 am

It’s very nice! thank for share.

May 18, 2011 at 9:01 am

You are a big man! Thanks for this (as always great) stuff

May 18, 2011 at 2:27 pm

Nice to see CSS3 put to use! I agree with you that sites need to be far more adaptive nowadays. This tutorial will no doubt help a lot of people to experiment with their site! Thanks for sharing, I’ve bookmarked it :)

May 18, 2011 at 8:40 pm

Brilliant – this has been a massive help, thanks so much!

Grace Graphic Designer
May 19, 2011 at 1:36 am

Very useful – thank you so much! :)

May 19, 2011 at 6:12 am

Thanks for sharing :) very helpful tutorial.

May 20, 2011 at 4:19 am

Hi there…Thanks for the post. Despite I am not a coder, I got a job on designing in Phortoshop for WordPress cms. But I can not publish the files. There is no specific option in Photoshop, so I am desperate. Anyone had this problem and solved successfully? Share your experience))

May 23, 2011 at 9:03 am

Hi! I convert psd to wordpress right from PS plugin, called Divine Elemente. If there is no coding experience, this might be good choice:
elemente.divine-project (dot) com

Website Design,
May 20, 2011 at 7:06 am

Photoshop is very useful to create a rich set of web application thanks for your valuable information about the webdesign.

Albany Web Design
May 20, 2011 at 8:27 am

Great tutorial here. Designing for mobile is super important right now, and will continue to be, but having a separate mobile only site can be a real pain. Thanks for the great advice on scalability, nice versatile solution.

Virtual Private Server and Vps Hosting
May 21, 2011 at 4:39 am

It’s very nice! thank for share.

May 21, 2011 at 4:14 pm

Very nice tips, and helpful for me as I redesign my own site. Only problem is that when I tilt your website to landscape mode in iPhone, it grows beyond the width of the screen–when I rotate it back to portrait, it looks correct again. The same thing is happening with my dev site. So there must be one final piece that’s missing here :/

Simplebits (for example) adapts properly when changing from portrait to landscape, so I’m trying to figure out what he’s doing differently…

May 21, 2011 at 4:24 pm

Mmmkay, I think I found the difference. Instead of this meta tag:

Simplebits uses this:

I tried it, and it fixed the problem.

May 21, 2011 at 4:26 pm

Well your comment box doesn’t like HTML tags I guess, but just check the simplebits source and you’ll see the difference in the meta viewport tag.

Diane Kennedy
May 21, 2011 at 5:11 pm

As always a brilliant tutorial. I’ve been struggling with this, so I can get the best bang for my clients’ buck and this illustrates it beautifully. I’m still figuring out how to explain the additional CSS coding costs to my client’s though? I mean, some clients ask “what’s a browser” when I ask which browser they are viewing with, and technology is changing so rapidly that they just don’t really understand what they are paying for.

May 22, 2011 at 9:37 am

I tested couple of browser, this technique is working fine with major browser, but not for chrome. I use chrome 11.

Audee Velasco
May 22, 2011 at 8:43 pm

I have also just redesigned my website into a responsive web design With all the css code for each media queries page width will make your css file size quite large. But, I think it’s worth it. is a grid framework for responsive web design, it helps a little bit. – is also a nice tool to sold the overhead issue for mobile browser. In a way, mobile browsers don’t have to download the images intended for the larger screen, they’ll get the optimize images instead.

Frontline Plus
May 23, 2011 at 4:12 am

Your source code is very detailed.

May 23, 2011 at 6:15 am

Awesome tutorial! Really nice work, and easy for designers and developers to follow! There should be no excuses not to start using adaptive design. Now, how to explain this to clients…LOL.

May 23, 2011 at 12:07 pm

Great tutorial. Does the reset iPhone viewport & initial scale meta tag handle the iPhone retina display?

Peter Ohlsson
May 24, 2011 at 3:21 am

Hi, I think the “rotate a iphone”-problem comes with that you increase the width, there for you have to add a code for the screen resolution 480px (and for max-min)

/* iphone portrait */
@media screen and (min-width: 320px) and (max-width: 320px) {

body {

margin: 1px;



/* iphone landscape */
@media screen and (min-width: 480px) and (max-width: 480px){

body {

margin-left: 2px;



/* retina! */
@media screen and (-webkit-min-device-pixel-ratio: 2) {

body {

margin-left: 3px;


Peter Ohlsson
May 24, 2011 at 3:25 am


You can make a css-tag for the different pixel ratio of the iphones.

Then add this script to change to meta-tags:

if( window.devicePixelRatio >= 2 ){

May 24, 2011 at 9:11 pm

Demo & download is very simple for me.I like this post,thank you.

May 25, 2011 at 10:00 am

Hi Emma and guys! I admit it is definitely good choice. Besides, what I have found http://www.elemente.divine-project .com does not require much funds, neither intellectual, nor money…Simple

Gaurav Mishra
May 27, 2011 at 1:18 am

Worked awesome! After resizing the screens.

Something Sublime
May 30, 2011 at 3:59 am

Really nice work, and easy for designers and developers to follow! There should be no excuses not to start using adaptive design. Thanks

Imobiliária Sorocaba
May 31, 2011 at 7:20 am

Great article! We have to make a cross-plataform web nowadays.

Sapatos Femininos
May 31, 2011 at 7:33 am

Really great tips, Nick! Adaptive design is my goal now. Tks!

Freelance Designer
Jun 1, 2011 at 3:19 pm

Great article, the hardest part is adjusting the design for different browsers.. Awesome tutorial helps, look great on iphone.

Jun 3, 2011 at 11:21 am

Thanks! Looks perfect on iPad! Also great article +!

Jun 4, 2011 at 5:23 am

Great. Nice looking on iPhone!

Jun 6, 2011 at 9:16 am

Very good tutorial! The -webkit-text-size-adjust: none; property solved my problems with crazy text resizment on iOS devices which was driving me nuts!

Jun 7, 2011 at 12:16 am

exactly what i was looking for. great info

Jun 7, 2011 at 12:37 am

çok güzel bilgiler teşekkürler ben siteme yani adlı siteme ekliyorum herzaman

Jun 7, 2011 at 10:15 am

Thanks a lot. Now I found what I wanted. I´m going to put in practice your tutorial when I get home. :) Bye

Harr R
Jun 8, 2011 at 8:26 pm

Thank you for the great tutorial and the excellent demo. This provides a great baseline for producing interesting sites that adapt to different media.


Jun 9, 2011 at 4:37 am

Clean and nice layout. I was amaze the way it was design perfect for mobile very clean….

Aquecedor Solar para Piscinas
Jun 9, 2011 at 1:06 pm

It looks very nice on iphone! great tips, btw. tks!

css splash
Jun 13, 2011 at 8:11 am

Cool. good looking on Android phone too… Css Splash – Web design inspiration gallery

Edmonton Web Design
Jun 14, 2011 at 1:11 pm

Great demo. I’d be interested in learning more about the js you’re using for the older IE versions.

Jun 14, 2011 at 4:32 pm

Very cool tutorial! Congratulations! Let’s keep in touch.

London Car Rental
Jun 22, 2011 at 4:48 am

Nice collection of portfolios. It is important to remember how long paper actually lasts :) Good stuff to keep around.

web tasarım izmir
Jun 22, 2011 at 12:23 pm

nice review ,and awesome article thanks for the post, I found this blog just yet but I am adding you to my bookmarks

Steven Crader
Jun 26, 2011 at 9:07 pm

This is an awesome article. As a new website designer, I have been struggling with this stuff. I will be using this method from now on.

Thanks Again
Steven – @stevencrader.

latest hindi songs
Jun 28, 2011 at 6:22 am

awesome article thanks for the post..i was surfing for this thanks for giving me such great stuff

SEO Website Design
Jul 2, 2011 at 3:51 pm

I’m not gonna kid you. This info on mobile website design is gonna take some time to absorb. But thanks for posting it and explaining in detail.

Your willingness and patience in sharing your knowledge is quite refreshing.

Jul 8, 2011 at 9:02 pm

Idk, i think mobile design is all over the place.

Cass Toyne - web design tauranga
Jul 7, 2011 at 11:20 pm

certianly takes a bit to understand the mobile sides of things, might have to read again :) Nice writeup tho

Jul 8, 2011 at 6:13 pm

forgive my ignorance, but what is the significance of the 650px width? i know its one-column, but it seems a bit arbitrary.

Jul 15, 2011 at 4:32 pm

Great article and demo. Only problem is, and I’m not positive on this, the iPhone initial-scale=1.0 line locks that in, true. But it also locks it in only on the initial view mode you start viewing the build in. ie – if you open this page on your iPhone in portrait mode, looks great. But flip over to landscape mode and nothing scales properly. The page is too wide, and elements scale up making them too large.

Great starting point though.

Jul 18, 2011 at 8:13 am

Nice tutorial, thanks :)
I checked out the demo with Firefox on my PC and on my Nokia E63 with default S60 browser, Opera mini/Opera mobile. Nokia’s default browser shows unscaled full page as on desktop, Opera mini showed scaled version but page is little wider than phone’s screen and Opera Mobile shows the page properly scaled.

So do the trick in most device browsers.

How to make page compatible with those mobile browsers which doesn’t support media query like Nokia’s default browser?

Jul 21, 2011 at 8:17 am

Thank you very much! This article helps me understand a lot of things around mobile web. Thank you! :)

Lucas del Río
Jul 21, 2011 at 10:17 pm

This is simply great! It’s not easy but you made it pretty clear how to work every case in particular. Never seen any post like this one being so clear about adaptive structures… thanks for shearing this, I’m going to take the time to work with this and for sure share my results =) Thanks once again

Hira Kumar Maharjan
Jul 24, 2011 at 11:23 pm

It is helpful article for my personal projecst. thanks a lot.

Adam Weso
Jul 26, 2011 at 10:32 am

Hi I have a question. I’m playing around with the this demo and when i open the page on an ipad landscape it’s fine – rotate to portrait it’s fine but when I rotate back to landscape it goes back to full size? Is this an iPad thing or a media queries thing and what’s the fix?

Thanks and this is an awesome demo!

Jul 26, 2011 at 12:29 pm

“I love your blog. I really like the “wall graphics”. I also have a “wall graphics” support website at”

Web Designer
Jul 26, 2011 at 6:06 pm

Really very useful article. Some great information when considering all platforms – thanks again!

Aug 7, 2011 at 1:38 pm

Great article, I found this one for keeping your design of a mobile site simple.

Aug 8, 2011 at 7:35 am

Very Great article!
It is very help full for my next webdesign project.
Thank you

Aug 9, 2011 at 8:51 pm

This is really an amazing technique.. I’m going to try to adapt it to my website

Aug 16, 2011 at 9:34 pm

Video still seems to be super unreliable. When trying out both iframe and object, there are issues in addressing height in my project.

Javed Saifi
Aug 17, 2011 at 11:49 am

Wow! This is simply great and Excellent resource. This article helps me understand a lot of things around mobile web. Thank you! :)

Aug 17, 2011 at 2:01 pm

please, is it possible to use a flexible slideshow (some kind of script), instead of flexible images? it would be so nice of you to help me. thank you.

Peter Schreiner
Aug 17, 2011 at 4:18 pm

I have to thank you again for this! It’s changed my whole approach to designing websites. SALUTE!

Aug 23, 2011 at 7:26 am

Great Post.
I will use your techniques in my next web-project.
So much better than having to maintain a separate layout for the mobile site.

web design
Aug 24, 2011 at 6:47 am

i’ve got lots of ideas here. thank you! i do have my site also for web designing. kindly visit!!

cape coral web design
Aug 29, 2011 at 7:49 am

Really love your post, very helpful. Great ideas and very informative. I have learned a lot of things. Keep sharing your thoughts! :)

Daquan Wright
Sep 1, 2011 at 9:43 pm

Just kick ass, once I get my next layout up, I’ll be back!

Sep 9, 2011 at 12:51 pm

I love CSS3 and HTML5.

Web Designer France
Sep 16, 2011 at 8:31 am

Very nice! The document flow works great, even down at 245px wide, it still reads very well. Nicely done.

Sep 20, 2011 at 1:35 am

your site is very good job.

Oct 3, 2011 at 2:59 am

this site is so nice i like this

Ash Connell
Oct 4, 2011 at 5:23 am

When changing the phone to landscape, the layout doesn’t stick to the size of the viewport. To fix this, change the meta tag from:


Have fun!

Ash Connell
Oct 4, 2011 at 5:24 am

….i cant enter code into a comment? :-P

What i mean is add maximum-scale=1.0 to the meta tag

Binu Xavier
Oct 5, 2011 at 10:48 pm

thanks for your help.. i really enjoy the css learning through this website… thanks for your help.. binu xavier

Oct 7, 2011 at 6:27 am


aside is for article related content, not for generic sidebars and widgets covering the whole site content. see html5 specs. thanks.

Web Design Cairns
Oct 9, 2011 at 1:29 am

In view of the cut-throat competition in the cyberspace, many small as well as large business concerns feel the necessity to best represent them on the Internet and print media. They look for an expert web and graphic design firm that can satisfy their specific needs and boost their online presence. A successful website is generally bundled with attention-getting layouts, essential functionality, best possible user-friendliness and creative brand image. There are many Cairns web design firms that ensure the presence of all aforesaid attributes in their web works.

Oct 31, 2011 at 9:37 pm


moncler discount store
Oct 13, 2011 at 10:03 pm

Thanks for sharing a wonderful post.

Oct 14, 2011 at 11:24 am

Hi everyone.
At first time, thanks for this great post.
In my web i have inserted diferents google maps. The problem is that the images inside them like scale controls and street view icon doesn´t show correctly. How can i resolve it.

Thanks in advance.

Ruby Barrera
Oct 18, 2011 at 7:46 pm

Tnx for the html codes used for designing

Oct 19, 2011 at 9:42 am

This is fantastic, can’t wait to get started on my next freelance project so I can build with it! thank you for the great tutorial :)

Oct 23, 2011 at 6:41 pm

I not only bookmarked this tutorial, I added it to my bookmark menu bar!

Peter Flynn
Oct 28, 2011 at 8:34 am

What is the CSS3/HTML5 way to get two banner images aligned top left and top right so that they expand and contract to fill the same % horizontal space all the time regardless of browser and screen size? Clearly the traditional table or div and img % width settings won’t work.

Oct 29, 2011 at 3:29 am

Thank you for the explanation and example. friendly

Nov 1, 2011 at 11:52 pm

Awesome! Nicely explained. Just bookmarked the tut and downloaded the example. Thanks a lot.

Nov 3, 2011 at 12:18 am

I like the tutorial explained here. I was trying CSS3 Media Queries from last few months and was stacking with various problems.
I found many solutions here and best part of it this is explained with HTML5, that’s really nice.

Thanks for these all….

Nov 5, 2011 at 11:27 am

Doesn’t work in IE – tested with IE Tester and IE 7.0 on my computer :(

Nov 5, 2011 at 5:03 pm

Will the custom CSS upgrade in recognize the @media tag?

Nov 6, 2011 at 9:37 pm

can you recommend a nice fluid 100% width design idea? hard to find any design example anywhere (besides large image background websites) that have a nice left menu all the way on the left..

Nov 7, 2011 at 2:02 pm

Terrific tutorial. Thanks for sharing.

Nov 13, 2011 at 2:44 am

really nice tutorial..this is really exactly what i need..thank you so much..

Nov 13, 2011 at 6:43 am

Nice example, however, on my ipad 2, running the latest safari browser.
It all starts good, but when you rotate to portrait mode and go back to landscape, the layout is too wide. in otherwords, the sidebar does not show.
There is something wrong with the scaling I assume. As when i refresh the layout is smaller than when I rotate the screen.

Any idea how to fix that?

Dec 14, 2011 at 5:26 am

A month late but if anyone is reading this comment and looking for the answer:

Really great article by the way! as always

Nov 17, 2011 at 6:24 am

Thanks for the nice tutorial. I hope can build the same responsive theme taking something out of this.

Andrew Kelley
Nov 18, 2011 at 10:04 pm

Why isn’t it working on my brand new blackberry 990. is a responsive theme which works on my blackberry but doesn’t work… What did you do differently?

Nov 24, 2011 at 7:27 am

That url links to the first step in the tutorial that does not contain any @media calls.

look at the finished demo to see it work.

led lenser h14r
Nov 19, 2011 at 2:13 am

Fantastic and thougher tutorial. Thanks for sharing it.

Nov 24, 2011 at 7:24 am

As always with this site, all I can say is props to you sir for yet another insightful breakdown of important CSS/design concepts

Dec 9, 2011 at 7:58 pm

For god’s sake, man: this is good stuff!

Lxweb Solutions
Dec 10, 2011 at 3:05 am


Thanks for such a wonderful tricks. Here i have a question and forgive me if Im making no sense in my words :)

For the responsive designs, do I only need to first create a general design as we do normally from PSD to XHTML and thn use the above additions/tricks to make it working?


Dec 10, 2011 at 1:18 pm

… and print….

Web Design Staffordshire
Dec 14, 2011 at 8:33 am

Just come to this page from your Responsive Design in 3 Steps and both were worth the read. I appreciate how clearly this has been written and it provides a useful basis in understand the basics of responsive design. Thank you.

Dan Avery
Dec 24, 2011 at 12:59 am

I’m curious as to why you’re not using modernizr which has respond.js built in. Modernizr also allows IE to read html5 correctly.

Phil Wareham
Jan 13, 2012 at 11:19 am

Some good reasons I can see:

respond.js has just been stripped out of the Modernizr builder (citing performance concerns):

Also, because these 2 scripts (the shiv and media query support) are loaded as IE conditionals, they will not add unnecessary extra filesize to the page load on modern browsers (since they will skip past those links).

That’s assuming you don’t need the extra tests that Modernizr can provide, of course.

Dec 26, 2011 at 1:11 pm

when i study it. i only want to say from bottom of my heart thanks a lot guys. u guys rocks. free html/css helps me a lot to learn a responsibe design from scratch. I’m lovin in it. keep sharing. once again thnks a lot….

UK Web Designer
Jan 8, 2012 at 8:43 am

WOW!! – I am late to the responsive design party and this is the first tutorial I found on Google – so glad I did – it’s an excellent and clear introduction for me. I intend to use and adapt this for one of my sites in the next week or so. Thank you.

Carlo C
Jan 9, 2012 at 11:56 pm

I am creating some wordpress theme and your tutorial helps me.

Tristan Bowersox
Jan 16, 2012 at 6:09 pm

The one thing that I need that wasn’t covered is how to either make certain elements disappear or replace them with others (such as replacing a nav menu with a dropdown list).

Fantastic tutorial otherwise!

Joseph Buarao
Jan 20, 2012 at 2:43 am

very detailed this is what I’m looking for.. I’m tasked to create a responsive layout and I think this is solution.. thank you so much mate.. :)

mobile websitemobile website builder
Jan 20, 2012 at 4:15 pm

I have read several just right stuff here. Certainly value bookmarking for revisiting. I wonder how a lot effort you put to create this sort of magnificent informative web site.

Jan 21, 2012 at 7:00 am

This is an absolutely great guide to responsive design… really, really useful and easy to use! Thanks!

Jan 23, 2012 at 7:05 pm

Have to say Nick – this is a beautiful comments design you have here ;)

Print Direct Mail
Jan 31, 2012 at 6:48 am

You’ve got great insights about printing and mailing, keep up the good work!

Feb 2, 2012 at 8:44 am

Just viewed demo on an ipad which looks OK until I change orientation from Portrait to landscape. When I do it goes off screen (layout too wide for device). However, it doesn’t happen when I visit the site in landscape orientation. I think you need a javascript function to reset it. Hope this helps

Chad Buie
Feb 19, 2012 at 12:45 pm

OMG seriously….this is worse than a virus spreading by thought.

Mar 8, 2012 at 11:12 am

What is worse than a virus?

Resposive webdesign?

It’s a true blessing my friend!


Helge-Kristoffer Wang
Mar 12, 2012 at 9:59 am

You afraid of learning new stuff, Chad? Responsive web design is a great functionality, and I can not understand how you could come with such a statement.

Of course, there are con’s & pro’s with responsive design – which means you’ll have to decide weither its useful for the project. A good web design doesn’t contain more than needed, or less. So to contain a good web design trough out every device; I would say responsive design can be VERY useful.

Dallas Web Designer
Feb 2, 2012 at 11:56 am

Very useful information as usually. I always end up on your site when I am trouble shooting something. I am always grateful for your tips.

Feb 2, 2012 at 12:58 pm

Great stuff. Thank you very much.
We’re just redesigning our website this way.

Feb 4, 2012 at 1:03 pm

The “html.js” is not working in I.E 8 browser.

Your script is “

I wish instead of calling the script from a web link it would be safe if we had a folder with us and call the .js through this folder !

Feb 4, 2012 at 2:07 pm

Your demo is working online but, I downloaded the zip file, then unzipped it and double clicked “final.html”, here it is not working !

Feb 8, 2012 at 1:08 pm

i cant make it work in ie8 to

Feb 8, 2012 at 1:12 pm

i can not make it work in ie8 to

Feb 7, 2012 at 10:22 am

I have a question… If my page is visited by some resolution, could be 1280×1024, the browser loads the content made for the other screen resoutions (1024×720 – 144×900 -1366×768 etc ?? the thing is that my website loads different size images depending of the screen resolution, and would be bad thing if loads everything… thank you

Feb 9, 2012 at 2:50 pm

Thanks for this! Can’t wait to try it out on a site redesign.

Carl Smart
Feb 16, 2012 at 9:57 am

Thanks for this, great tutorial -:)

Chad Buie
Feb 19, 2012 at 12:44 pm

Finally, I found an answer for the re-sizing. I think someone should start a permanent website or blog that addresses this! I would certainly donate to this cause. If there is a site, please tell me so I can bookmark; excuse my ignorance.

Nia Dush
Feb 19, 2012 at 9:50 pm

Our Government is operating so far outside of its design parameters that this type of discussion becomes futile. IMO the place to begin is eliminating tax which would force massive reductions in power and programs, bringing the govt. more in line with the founders structure. Only then can a discussion vis-a-vis federal and state govts. become worthwhile.

Feb 25, 2012 at 10:16 am

Fantastic tutorial, was directed here for the pre-IE 9 media query hack. Very helpful, thanks a lot!

Feb 29, 2012 at 2:00 pm

Using your article, I have made my site responsive, but on an Android device it shows the larger (940px and up) version by default, not the one I specified in the media queries for devices under 460px. How can I accommodate for this in my responsive site design or is it a mobile-device-specific issue?

isco abento
Mar 1, 2012 at 5:53 am


Mar 6, 2012 at 4:17 pm

Media queries and all Responsive design stuff is simple to understand indeed, but the ‘mobile first’ concept (not discussed here) is really hard to understand, at least for me. Is there a way to start applying it for us ‘desktop first’ front-end devs?

Mar 9, 2012 at 3:15 pm

Great article and a good starting point for anyone getting into modern web design.

Life insurance for Diabetics
Mar 12, 2012 at 9:03 am

Great guide… thanks for sharing!! :)

Mar 14, 2012 at 7:59 am

very very useful……

David Radovanovic
Mar 14, 2012 at 10:23 am

Great tutorial. Easy to understand with “just the facts”. One issue that I have: since WordPress automatically adds height and width attributes to src tag, would it be helpful to use a function, JavaScript or alike to remove the size attributes? I have several methods if you’d like?

Mar 22, 2012 at 6:16 am

Thanks for another great tutorial! Times are evolving and web designers need to keep up, that’s a fact. However, I do feel that the more we adjust our website designs to display properly on different screens and devices is limiting our creative ability. Designers need to create designs that fit all, so it’s almost becoming a necessity to stick to the standard header-content-sidebar-footer layout, making it hard for creative, alternative designs to survive and I think that’s just too bad.

Mar 26, 2012 at 12:26 pm

The demo is working well. Thanks for sharing great tutorial.

Mar 26, 2012 at 8:10 pm

The demo didn’t work correctly when changing from portrait to landscape on an iPad (1) It was fine when changed back to portrait

Mar 27, 2012 at 7:57 am

Thank! ;)

Tu Nguyen
Mar 29, 2012 at 7:41 am

Great article. Clear and easy to follow even to a none web developer like me. Now I’m trying to convert my blog to responsive design.

Mar 29, 2012 at 3:47 pm

Great article! I’m hoping to really go at my first responsive design in the next few weeks. It will be a full on WordPress website with all the trimmings… jumping in at the deep end but very excited!

Colin Crawford
Apr 25, 2012 at 5:03 pm

It’s built into the Twenty Eleven Theme and works quite well on an Android mobile phone. You can also see the results by resizing the browser window.

emad mohamed
Apr 1, 2012 at 8:09 am

Dear its really really a great example it helped me alot
but i have just one inquiry how can i make the bakground color white
the point is i am using a middle background that is not stretched and i want to change the darkblue background to be white but i cannot get it from css ?

Apr 12, 2012 at 2:23 pm

Great tutorial, easy to understand. Thanks for sharing.

Apr 16, 2012 at 9:21 am

Great tutorial htanks! but your sample templates didnt work on my Samsung android nor iphone 4, they just look full size… while other sites do well. like:… any suggestion

Apr 20, 2012 at 11:35 am

If only there was an article writeen on a step by step instructions on how to upload it aand where to upload it, it would have been wonderful. I presume all these articles are written for guys who are tech savvy and folks like us just get lost. I have been tryinf for the last one month to get a responsive theme work but I am afraid I have reached no where :(

Colin Crawford
Apr 25, 2012 at 4:58 pm

Great article and easy to follow, managed to get a demo up and running. I wanted to try and implement it in WordPress and then found an article about the latest theme and it is already built in with the Twenty Eleven theme.

Fery Ardiant
Apr 25, 2012 at 8:10 pm

thanks for the awesome step by step tutorial…

Apr 26, 2012 at 2:12 am

Gracias broder, thanks bro !

Apr 28, 2012 at 10:12 am

Excellent, first time learning responsive and it doesn’t take me that long with this clear tutorial. Thanks
Regarding image, You mentioned we should use
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
that works but what if the img is part of the css background, say
#footer {
background: url(“../images/footer.png”) no-repeat scroll -90px top #2B803F;

How can we make the image in this case become responsive?

Apr 30, 2012 at 4:33 pm

Oh, by the way, to have the above work on iOS especially on iPhone, I have to include this in the tag

Hope that help to save somebody time.

May 2, 2012 at 5:47 pm

for some reason, on an IPAD, if you rotate it, the responsive doesn’t work?

Any clue? Thanks

May 2, 2012 at 11:53 pm

I think I fix it by change this
meta content=”width=device-width, initial-scale=1.0″ name=”viewport”
to this
meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no”

May 10, 2012 at 2:27 am

Very useful tutorial! Thank you for explaining it! Keep up with this good work.
Thanks, AE

Swamy Giduturi
May 11, 2012 at 12:58 am

I want download this demo website, Can you add the download ZIP files please.


May 11, 2012 at 1:15 am

Browser : ie8 and ie7
It works fine on your hosted demo. But its not working when i opened local file after downloading your demo.

Even i tried my own responsive code, it doesn’t working called up on locally? I that the reason? I need to try hosting somewhere else?

Then only it works fine?

Please respond

Thanks for the great article Nick :)

May 18, 2012 at 7:52 pm

I think the problem with IE7/8 not working locally is with the css3-mediaqueries js file. I read that the code inside it uses an XMLHTTP request which only works on a web server. Same issue with respond.js.
See here under Support and Caveats


May 12, 2012 at 10:35 am

Seriously? Really? You want the author to try to diagnose (and fix) your problems – for free no doubt ? Please Respond – YUH.

May 20, 2012 at 9:01 pm

I think this article is great. I had read carefully and test in my pc. it works great and I think I can code the responsive web. the key note is media query in my opinion.

Alani Parker
May 21, 2012 at 12:28 am

Thank you for another great article, it really helped me understand responsive design and it’s actually easier than I thought. :)

May 21, 2012 at 8:38 am

Tnx dude !!!
it was great !!!!!!!!!!!!!!!!!

Web design jobs
May 21, 2012 at 11:28 am

Thank you for the great share.I’m sure lots of people will benefit to this share.Please keep me updated of any new information that you will have.

Husien Adel
May 27, 2012 at 4:47 pm

Great tutorial ;) thanks for it

Steve Dimmick
Jun 4, 2012 at 12:02 pm

Great informative tutorial – thanks Nick!
This is a perfect find as I have 3 projects starting and need to get up to speed with responsive design and css media queries fast. I will be using the new Canvas theme (v5) from Woo Themes.

Thanks again!

Jun 6, 2012 at 2:04 pm

veri veri good job,bravo.

Jul 2, 2012 at 7:44 am

thank you very much for this great tutorial! i was having a lot of problems with my web and i will start from the beginning with your tutorial!

Jul 4, 2012 at 11:15 am

Great tut. but is not working on my IE 8 copy the final doc and place it on my server compair it with your demo source and see now differents between them. I know it must be on my end but don’t see where. work ok in Firefox, safari, etc.

Maheswaran Manoharan
Jul 5, 2012 at 9:01 am

Thank you very much for this great tutorial! It really helped me understand responsive design and it’s actually good to learn.

Jul 10, 2012 at 8:17 am

This is the best tutorial I have found so far on responsive design. It is simple and straight forward. Very easy to understand! I would highly recommend this to anyone looking to expand their knowledge base. Thanks!!!

Jul 11, 2012 at 3:00 am

thanks you veryy much.

Jonathan Clark
Jul 16, 2012 at 12:21 pm

This is a great tutorial! Finally we don’t have to create 3 separate apps for cross-platform compatibility!

Jul 22, 2012 at 10:23 am

Thank you for this good tutorial.

Jul 24, 2012 at 6:42 am

This is really very informative tutorial. Thank you so much

Jul 27, 2012 at 7:42 am

Thanks. Thanks. Thanks.

Ibiza yates
Jul 29, 2012 at 1:30 pm

This is a perfect find as I have 3 projects starting and need to get up to speed with responsive design and css media queries fast. I will be using the new Canvas theme (v5) from Woo Themes.

Aug 2, 2012 at 6:36 am

I have one stylesheet with all my css styles, also de media queries are in this stylesheet. If I use the JS file to fix media queries in IE7 and IE8, do I have to make two stylesheet (one for the media styles)?

Aug 21, 2012 at 10:25 pm

Thank-you for an amazing tutorial. When I started searching for guides on fluid layouts I honestly didn’t think I would find one that does exactly what I want and is this easy to understand.

Sep 1, 2012 at 6:03 pm

Thanks…………. its very nice….

Thanh Binh
Sep 18, 2012 at 2:42 am

Thanks so much. It’s really helpful for me

Sep 24, 2012 at 6:03 am

nice tutorial
how to resize the div’s if the screen width is more than 980px.

Ganesh Kumar
Oct 4, 2012 at 7:12 am

I want to use the CSS idea of flexible images. If I copy the CSS code, will there be any copy right issue?


Oct 7, 2012 at 11:50 pm


Really thanks for the tutorial, it’s so clear, perfect.

I”ve got a question : if I had responsive design to only one div in the design, will that div move and the others stay the same ?


Oct 11, 2012 at 12:43 pm

Another excellent, plug-and-play tutorial. I plan to use (or borrow from) it in my responsive designs.

Bert Schipperijn
Oct 31, 2012 at 9:16 am

Great overvieuw, many thanks from our team here !

Vipin Raj
Nov 15, 2012 at 1:08 am

Hi ,

The tut seems to be very helpfull for me as a beginner of responsive web designing.
it is so simple and clear tut…….thnx and hoping more about…..

Jan 30, 2013 at 2:54 am

I love this tutorials. its helps me alots.

Feb 1, 2013 at 3:13 am

very useful tutorial, Very well explained.
Great job.. Thumbs up..:)

Feb 26, 2013 at 6:01 pm

Totally just saved my butt! Using a Woo theme and everything in a gallery or portfolio was doing just fine, but in a page or post, not so much. The images were distorted on mobile devices. Guess what the client viewed her shiny new site on… yeah. An iPhone. Woo’s response? Resize every image by hand in the editor. Not only did it make the photos look ridiculous, it is completely unreasonable and unfeasible because I’m not going to ask my client to go back through 300 pictures and resize them like that or to resize every time she uploads a new one. I needed a global solution, not a case-by-case hack. This totally did the job. I thank you from the bottom of my cranky heart!

Krishan Govind
May 4, 2013 at 3:25 am

This tutorial is really cool and clear! Thanks! :]

Aamir Shahzad
May 6, 2013 at 2:43 am

How to run media quires for IE8-7???

Justin Y.
Jun 5, 2013 at 11:39 pm

Good tutorial, it would great to update it and include the new viewport sizes like i5 etc. I still use these tricks to do this day, thanks again for the info.

Pressure Washers
Jun 7, 2013 at 12:50 pm

This is awesome post,with all the important points and coding. I really liked this post as this is the age of responsive design and this post is going to help us a lot.
Pressure Washers

Jun 7, 2013 at 4:25 pm

I’m finding it extremely frustrating using responsive design as what works and looks fine with Firefox developer tools and some online testing viewers I’ve found absolutely do not work on the actual devices. How are people suppose to work like this?

Rudresh R
Apr 22, 2017 at 12:17 am

Hi Iam Rudresh,From India ,

nice tutor to implement,
how to do responsive ….if screen width is above 980px;???

Post Comment or Questions

Your email address will not be published. Required fields are marked *