Responsive Design with CSS3 Media Queries

http://webdesignerwall.com/tutorials/responsive-design-with-css3-med...

A wall of design ideas, web trends, and tutorials

May 11, 2011 Tutorials coding, css, responsive design

Screen resolution nowsaday ranges from 320px (iPhone) to 2560px (large monitor) or ev Users no longer just browse the web with desktop computers. Users now use mobile phon 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 adjusted to fit all display resolution and devices. This tutorial will show you how to create a crossbrowser responsive design with HTML5 & CSS3 media queries.

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 fl 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: Elemin, Suco, iTheme2, Funki, Minblr, and Wumblr.

Overview

1 of 11

15/07/13 13:11

Responsive Design with CSS3 Media Queries

http://webdesignerwall.com/tutorials/responsive-design-with-css3-med...

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

HTML Code
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"> <hgroup> <h1 id="site-logo">Demo</h1> <h2 id="site-description">Site Description</h2> </hgroup> <nav> <ul id="main-nav"> <li><a href="#">Home</a></li> </ul> </nav> <form id="searchform"> <input type="search"> </form> </header> <div id="content"> <article class="post"> blog post </article> </div> <aside id="sidebar"> <section class="widget"> widget

2 of 11

15/07/13 13:11

Responsive Design with CSS3 Media Queries

http://webdesignerwall.com/tutorials/responsive-design-with-css3-med...

</section> </aside> <footer id="footer"> footer </footer> </div>

HTML5.js

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 HT document will enable IE to acknowledge the new elements.

<!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->

CSS

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 160p 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;

3 of 11

15/07/13 13:11

Responsive Design with CSS3 Media Queries

http://webdesignerwall.com/tutorials/responsive-design-with-css3-med...

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 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="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.j <![endif]-->

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%
T IPS:

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

@media screen and (max-width: 980px) { #pagewrap { width: 95%; } #content {

4 of 11

15/07/13 13:11

Responsive Design with CSS3 Media Queries

http://webdesignerwall.com/tutorials/responsive-design-with-css3-med...

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;

5 of 11

15/07/13 13:11

Responsive Design with CSS3 Media Queries

http://webdesignerwall.com/tutorials/responsive-design-with-css3-med...

} #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% height:auto works in IE7, but not in IE8 (yes, another weird IE bug). To fix this, you need to add width:auto\9

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% embed element) doesn't work in Safari. The work around is to use width:100% instead.

.video embed, .video object,

6 of 11

15/07/13 13:11

Responsive Design with CSS3 Media Queries

http://webdesignerwall.com/tutorials/responsive-design-with-css3-med...

.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 u 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 w the iPhone, iPad, Blackberry (newer versions), and Android phones to see the mobile version.

Summaries
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="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.j <![endif]-->

7 of 11

15/07/13 13:11

Responsive Design with CSS3 Media Queries

http://webdesignerwall.com/tutorials/responsive-design-with-css3-med...

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:

8 of 11

15/07/13 13:11

Responsive Design with CSS3 Media Queries

http://webdesignerwall.com/tutorials/responsive-design-with-css3-med...

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

Updates
iPhone Safari Viewport Bug & Fixes CSS: Elastic Video Responsive Design in 3 Steps Responsive Design Inspiration

Stephanie
AUG 21, 2012 @ 22:25

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

Kapil
SEP 01, 2012 @ 18:03

Thanks. its very nice.

Thanh Binh
SEP 18, 2012 @ 02:42

Thanks so much. Its really helpful for me

Purushotham
SEP 24, 2012 @ 06:03

Hi nice tutorial how to resize the divs if the screen width is more than 980px.

Ganesh Kumar
OCT 04, 2012 @ 07:12

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

Bruno
OCT 07, 2012 @ 23:50

Hi

9 of 11

15/07/13 13:11

Responsive Design with CSS3 Media Queries

http://webdesignerwall.com/tutorials/responsive-design-with-css3-med...

Really thanks for the tutorial, its so clear, perfect. Ive 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 ? Thanks

Ed
OCT 11, 2012 @ 12:43

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

Bert Schipperijn
OCT 31, 2012 @ 09:16

Great overvieuw, many thanks from our team here !

Vipin Raj
NOV 15, 2012 @ 01:08

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..

Yogender
JAN 30, 2013 @ 02:54

I love this tutorials. its helps me alots.

John
FEB 01, 2013 @ 03:13

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

BossLady
FEB 26, 2013 @ 18:01

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, so much. The images were distorted on mobile devices. Guess what the client viewed her shiny new site on yeah. An iPhone. W response? Resize every image by hand in the editor. Not only did it make the photos look ridiculous, it is completely unreasonab and unfeasible because Im not going to ask my client to go back through 300 pictures and resize them like that or to resize ever 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 04, 2013 @ 03:25

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

Aamir Shahzad
MAY 06, 2013 @ 02:43

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

Justin Y.

10 of 11

15/07/13 13:11

Responsive Design with CSS3 Media Queries

http://webdesignerwall.com/tutorials/responsive-design-with-css3-med...

JUN 05, 2013 @ 23:39

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, than again for the info.

Pressure Washers
JUN 07, 2013 @ 12:50

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 post is going to help us a lot. Thanks. Pressure Washers

Drew
JUN 07, 2013 @ 16:25

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

Web Designer Wall is all about design, ideas, web trends, and tutorials. It is designed and maintained by Nick La, who also runs N.Design Studio, Themify, IconDock, and Best Web Gallery.
WEB DESIGNER WALL 2013

11 of 11

15/07/13 13:11