CSS2 allows you to specify stylesheet for specific media type such as screen or print. Now CSS3 makes it even more efficient by adding media queries. You can add expressions to media type to check for certain conditions and apply different stylesheets. For example, you can have one stylesheet for large displays and a different stylesheet specifically for mobile devices. It is quite powerful because it allows you to tailor to different resolutions and devices without changing the content. Continue on this post to read the tutorial and see some websites that make good use of media queries.

CSS3 Media Queries (demo)

Check my demo and resize your browser window to see it in action.

Max Width

The following CSS will apply if the viewing area is smaller than 600px.

@media screen and (max-width: 600px) {
  .class {
    background: #ccc;

If you want to link to a separate stylesheet, put the following line of code in between the <head> tag.

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

Min Width

The following CSS will apply if the viewing area is greater than 900px.

@media screen and (min-width: 900px) {
  .class {
    background: #666;

Multiple Media Queries

You can combine multiple media queries. The following code will apply if the viewing area is between 600px and 900px.

@media screen and (min-width: 600px) and (max-width: 900px) {
  .class {
    background: #333;

Device Width

The following code will apply if the max-device-width is 480px (eg. iPhone display). Note: max-device-width means the actual resolution of the device and max-width means the viewing area resolution.

@media screen and (max-device-width: 480px) {
  .class {
    background: #000;

For iPhone 4

The following stylesheet is specifically for iPhone 4 (credits: Thomas Maier).

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />

For iPad

You can also use media query to detect orientation (portrait or landscapse) on the iPad (credits: Cloud Four).

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> 
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

Media Queries for Internet Explorer

Unfortunately, media query is not supported in Internet Explorer 8 or older. You can use Javascript to hack around. Below are some solutions:

Sample Sites

You need to view the following sites with a browser that supports media queries such as Firefox, Chrome, and Safari. Go to each site and see how the layout responds base on the size of your browser winow.


  • Large size: 3 columns sidebar
  • Smaller: 2 columns sidebar (the middle column drops to the left column)
  • Even smaller: 1 column sidebar (the right column shift up below the logo)
  • Smallest: no sidebar (logo & right column shift up and the other sidebar columns move below)

screen capture


The layout switches between one column, 2 columns, and 4 columns depend on the viewing area of your browser.

screen capture

A List Apart

  • Large size: navigation at the top, 1 row of pictures
  • Medium size: navigation on the left side, 3 columns of pictures
  • Small size: navigation at the top, no background image on logo, 3 columns of pictures

screen capture

Tee Gallery

This one is very similar to previous example Colly, but the difference is the images of TeeGallery resize as the layout stretchs. The trick here is use relative percentage value instead of fixed pixel (ie. width=100%).

screen capture


Keep in mind: having an optimized stylesheet for mobile devices doesn’t mean your site is optimized for mobile. To be truly optimized for mobile devices, your images and markups need to cut on the load size as well. Media queries are meant for design presentation, not optimization.


Chef de projet internet
Aug 18, 2010 at 10:49 am

Hi ! Your demo is not found :( –> https://webdesignerwall.mystagingwebsite.com/demo/media-queries/

Shaan Qazi
Aug 2, 2011 at 2:34 am

open the url at firefox (FF)

Aug 18, 2010 at 10:51 am

CSS2??? Whoa, typo!

Aug 18, 2010 at 10:59 am

Nice examples !

Ajay Karwal
Aug 18, 2010 at 11:02 am

Excellent tutorials and thanks for the tips about the iphone resolution and ipad orientation…

Aug 18, 2010 at 11:52 am

Using Javascripts for those effects since 2 years and pretty happy i can do it with css only now. Here our 4th magazine-issue from may done with media queries: http://www.designmadeingermany.de/magazin/4/

Aug 18, 2010 at 12:16 pm

Nice post!

It’s not a typo, he’s referring to the previous CSS version, 2.

Aug 18, 2010 at 1:14 pm

Does the orientation hook work on iPhones as well? Or just iPads?

Christopher Carlsson
Aug 18, 2010 at 1:50 pm

Wow! Thanks alot, that really helped out a bunch!

stuart robson
Aug 18, 2010 at 4:07 pm

7. Eric – No, the orientation hook only works on the iPad. :-(

Aug 18, 2010 at 4:08 pm

thanks, good tips

Aug 18, 2010 at 5:05 pm

Awesome tips and a fantastic article.

Thank you very much for sharing.

Alojamento Web
Aug 18, 2010 at 6:15 pm

Nice examples that you’ve got here.

It would be great if you could let anyone download it. As you did in the past.

Nick La
Aug 18, 2010 at 11:06 pm

@Alojamento Web – To download the demo, go to File > Save Page As.

Hastimal Shah
Aug 19, 2010 at 12:07 am

Nice Post..
It will help me!!

Aug 19, 2010 at 8:28 am

Great post and another great tool to add to your CSS arsenal.

Robert Tobys
Aug 19, 2010 at 10:19 am

Excellent post. It will be interesting to apply to fluid HTML5/CSS3 layout on my new site launch in September.

François Royer Mireault
Aug 19, 2010 at 3:39 pm

Well written and inspiring stuff. You make it sound simple, it gives us a bit of motivation to implement it on our sites. Thanks again.

Aug 19, 2010 at 6:21 pm

Eric, Stuart – It seems silly that the iPad, Safari 4 all support the orientation media query yet the IPhone doesn’t.

However, I came up with a solution to detect orientation using media queries for the iPhone check it out http://www.1stwebdesigner.com/tutorials/how-to-use-css3-orientation-media-queries/

Aug 19, 2010 at 7:27 pm

Great Article! Thx : )

Bible Online
Aug 20, 2010 at 12:10 am

It’s good article for me, it’s useful some times.

Puneet Sahalot
Aug 20, 2010 at 5:22 am

Perfect tutorial. Will surely give it a try on my website. Thanks for sharing :)

Kaye Media
Aug 20, 2010 at 5:52 am

Very good article

Abraham C. C.
Aug 20, 2010 at 7:57 am

thanks for the article :D it’s going to be very useful in a project.

Web design portfolio
Aug 20, 2010 at 9:46 am

awesome stuff.

Aug 20, 2010 at 11:12 am

Great article. Mobile design is definitely not a cosmetic only feature anymore and with the growing market of smartphones, better start doing it by default i’d say.

Online Portfolio
Aug 21, 2010 at 10:42 am

Very helpful, can’t wait to utilize this. I wonder if you could target specific devices like the iphone/pad just by using CSS now…?

Micke Hasselqvist
Aug 21, 2010 at 3:20 pm

Very well written article, thank you. I liked the examples you provided, makes it easy to follow along.

It’s just to bad that IE as usually won’t support these kind of things. I have great hopes for IE9 though, once it’s released!

Online Strategies
Aug 21, 2010 at 8:49 pm

Great info. Media queries is a nice addition to CSS that saves us a lot of time and effort in making the website more user-friendly. The provided demo is very useful.

Aug 22, 2010 at 12:32 pm

Great Great Great. Your CSS tutorials are the best!

Hans Kuijpers
Aug 23, 2010 at 5:42 am

Very interesting tutorial. Thank you

Aug 23, 2010 at 8:43 am

Certainly I have off topic question. I can see that web designers struggling for cross browser compatibility. My question is, is CSS3 still usable for our website. We still have lots of people still using Internet Explorer 6 and other non-upgraded browser version.

I don’t think older version browsers supports CSS3. How much practical it is to design your website in CSS3?

Webdezine Blog

crusher machine
Aug 23, 2010 at 11:47 pm

Thanks for share.

Xaby Web Design
Aug 27, 2010 at 2:47 am

Helpful info there you have,this post saves me some time from searching. Thanks for your effort.

Aug 27, 2010 at 4:04 am

nice article!

Vibe web design
Aug 28, 2010 at 4:56 am

Great Great Great.

Aug 29, 2010 at 9:58 am

Hei, I didin’t knoow about this.
Thank you a lot!

Richard Kotze
Aug 29, 2010 at 1:12 pm

CSS 3 is pretty amazing! These media queries will certainly make life easier applying stylesheets to different browser sizes and mobile browsers. The iphone one is a good idea with the two orientations – simples. :)

Cesar Castro
Aug 31, 2010 at 4:38 pm

That’s useful, too bad CSS3 is only on modern browsers, I have tested many CSS3 codes on older browsers and the page gets converted into a mess, I guess we would have to wait until most people upgrade their browsers.

Sep 1, 2010 at 1:12 am

Thanks for sharing this. I have written it down on my notebook. IE is a mess so we have to wait for IE supporting this.

Aug 22, 2012 at 3:18 am

see you in 2035!

Sep 1, 2010 at 1:38 am

I just went to the demo web page on my phone (Samsung Gravity, smaller than an iPhone). Unfortunately all the colored boxes were lit up at once…so something went wrong. It seems the entire web design community is struggling to find a working solution. Surely there must be a way to check the screen size on non-Apple (and thus, non-Safari) devices?

Ore grinder
Sep 1, 2010 at 4:12 am

Yes, with css3 and html5 ,we can imply many effect easily.

cheap balmain jacket
Sep 4, 2010 at 2:44 am


Freelancer web designer
Sep 6, 2010 at 12:56 pm

Very Nice Article

Web tasarım izmir
Sep 7, 2010 at 3:56 am

thanks I will try all

Sep 7, 2010 at 9:00 pm


Jerky Oats
Sep 9, 2010 at 10:23 am

CSS 3 is going to help no end when developing websites! I wonder if IE will support this anytime soon?

great post.

Ardhy W. Nugroho
Sep 10, 2010 at 2:03 am

Actually I was re-designed my blog to implement CSS3 media-queries — currently being optimized.

Thanks for the article, it gives me more implementation reference.


Sep 12, 2010 at 7:43 am

great job guys..thanks

Sep 13, 2010 at 7:20 am

Now THIS is called story.now i am waiting for another

Michael Molino
Sep 13, 2010 at 7:59 am

Very informative and inspirational article! The same goes for the entire site. I’ve added you to my “must read weekly” right along with the likes of Alist Apart. Please keep up the good work. We budding web developers need out heroes!

bankruptcy attorney in los angeles
Sep 16, 2010 at 12:47 am

The codes are really great…

Loans Halifax
Sep 16, 2010 at 5:41 am

Thank you for this post, it really help me a lot… Thank you guys…

Sandy Wright
Sep 17, 2010 at 2:47 am

Great article-will definitely use some of the tips included here! Thanks!

Sep 19, 2010 at 2:59 am

this css is very good and it is beautiful theme
I will take this for my websites

Sep 19, 2010 at 10:13 am

Very well written article, thank you. I liked the examples you provided, makes it easy to follow along.

Sep 20, 2010 at 3:44 am

Nice CSS
but it not appropiate with my website

Ozon yağı
Sep 23, 2010 at 9:21 am

great css coding

ospop shoes shop
Sep 24, 2010 at 1:36 am

Great info. The provided demo is very useful.

Sep 27, 2010 at 2:11 am

Searh jobs

12,257,378 new jobs in the last 7 days


chinese new year
Sep 29, 2010 at 7:16 am

Very informative and inspirational article! The same goes for the entire site. I’ve added you to my “must read weekly” right along with the likes of Alist Apart.

Oct 1, 2010 at 8:18 pm

Very nice article, thank you.
I like the examples you provided.

paslanmaz çelik boru
Oct 5, 2010 at 3:04 pm

ccs3 very well compenent for web browsers

Space toys
Oct 6, 2010 at 1:50 pm

this is really cool. simple yet powerful

Oct 7, 2010 at 9:27 pm

I was reading something else about this on another blog. Interesting. Your position on it is diametrically contradicted to what I read earlier. I am still contemplating over the opposite points of view, but I’m tipped heavily toward yours. And no matter, that’s what is so great about modernized democracy and the marketplace of thoughts on-line.

Sensitive Designs
Oct 12, 2010 at 4:27 pm

This is a cool thing… !!

Oct 13, 2010 at 7:07 am

I’ve been using media queries on a few projects and much prefer this method than building a seperate mobile site or something running off a javascript framework like sencha.

This is the way forward..

Rob Hiffy
Oct 13, 2010 at 11:11 am

css 3 has some surprising quirks! Loving the new things it does though. Great blog, keep it up!

Business creation
Oct 13, 2010 at 10:59 pm

Totally informative, Thank you for all the efforts in sharing your talents with us.

Remy Hair
Oct 19, 2010 at 6:24 am

This is really a big help to my page. thank you

Kansas City Web Developer
Oct 27, 2010 at 10:59 pm

Well written, thank you

Oct 29, 2010 at 1:54 am

you get it !

Web Design Hull
Oct 29, 2010 at 2:07 pm

Useful article, thanks… can’t wait to start using CSS3 on a regular basis!

Oct 30, 2010 at 4:06 am

nice post thanks for a lot sharing with us

malaysia web design
Oct 31, 2010 at 2:53 am

great post….thanks for sharing….

Oct 31, 2010 at 10:15 pm

Totally informative, Thank you for all the efforts in sharing your talents with us.

Nov 2, 2010 at 1:34 am

Really, you have done great job. I enjoyed while reading this one and also inspired me too much. I will use this theme on my blog as well as website. I like it very much. Thanks for upgrade my knowledge.

Los Angeles Web Design

URL Send
Nov 2, 2010 at 12:12 pm

The iPhone specific stylesheet is a great help, thanks!

Billig hjemmeside
Nov 3, 2010 at 4:13 am

My site looks better on Iphone – thanks to You

premier pixels
Nov 24, 2010 at 3:02 am

I really like your information.Thanks for sharing.

Fausto Rone
Dec 22, 2010 at 12:48 pm

Utile article peut I mention ceci sur le mon emplacement ? Merci

accounting tracking
Dec 23, 2010 at 6:52 am


Dec 23, 2010 at 1:42 pm

wow that’s great :)

Dec 23, 2010 at 9:57 pm

Oh God you are a genius person and a good photographer i like your pics thanks.

Henry Peise
Dec 24, 2010 at 5:11 am

white iphone 4 is so charming and chic. As the icon of latest fashion, how can you miss it!

Dec 24, 2010 at 9:01 pm

Thank you for all the efforts in sharing your talents with us.

Juno Mindoes
Dec 25, 2010 at 2:39 am

But to really see the difference between these cameras I put together an overview containing 100% crops. It’s not fair comparing the white iPhone 4 with an 18 megapixel DSLR but it’s good to have as a reference.

clark david
Jan 7, 2011 at 5:46 am

Great Information and post! It is very informative and suggestible for the user of solar energy, May I think it can be beneficial in coming days…
facebook apps
nice posting and helpful info.

Uçak Bileti
Jan 11, 2011 at 2:50 pm

css3 teknolojisini hep beğendim

Jan 13, 2011 at 9:01 pm

Love the article and I’m always finding very useful stuff on your site.

One issue I have been having with media has shown up with your demo as well. I viewed the demo on a phone and both the grey and blue box highlighted along with not fitting to the screen. I’m not sure what the issues is but it’s like a lot of phones think they have a width of over 900px but just viewed at a small size. So everything is as if you have a 900px browser just seen from far away. I hope you understand what I’m talking about. Do you know why and maybe even have a solution?

Jan 15, 2011 at 1:51 am

Thanks for sharring importent information in this blog.It was very nice.

Jan 18, 2011 at 6:42 am

Nice Blog and very helpful…it’s very beautifully explained.

Jan 27, 2011 at 9:25 am

Thanks for a nice article, was just about start doing the same stylesheets for my application..you rock!!!

tütüne son
Jan 29, 2011 at 3:35 pm

Thanks for sharring importent information in this blog.It was very nice.

John McDuffie
Feb 2, 2011 at 3:04 pm

Very handy. This will solve one of the issues I’m having on my image hosting site.

Feb 7, 2011 at 5:46 am

Świetnie opisane, bardzo przydatne. Nie moge doczekać się kolejnych artykułów!

Fine writing, very helpful. Can not wait for the further articles!


Feb 13, 2011 at 6:18 am

First, i saw your demo and i don’t know, why should i use on a website. Your article help me to understand the possibility of this methode of css3. Thank you.


Mar 14, 2011 at 12:47 am

cool stuff

Mar 14, 2011 at 7:04 am

Thank you for this. It’s going to help a lot!

Mohd Irfan
Mar 19, 2011 at 7:25 am

Gr8 Information Big Bro

Mohd Irfan
Mar 19, 2011 at 7:26 am

But tell me one thin how can i test my diffrent stylsheet any testing software r u know if so plzzz tell me

Mar 21, 2011 at 5:38 pm

is not easy to put on weight

Ladida Cafe
Oct 24, 2011 at 8:43 pm

yes, I think it needs some experiments #lol

Apr 1, 2011 at 1:19 pm

good work.. thanks for sharing.. http://mediaqueri.es/

Apr 15, 2011 at 7:02 am

Really nice stuff….thanks

Apr 16, 2011 at 8:28 am

I try to use the CSS @media screen and (max-width: 600px)
and @media screen and (min-width: 600px) and (max-width: 00px)
unfortunatelly the first one (max-width: 600px) Works only in the head section of the page and not on a separate stylesheet.
I wonder where the problem is!

Apr 17, 2011 at 1:09 pm

Recent surveys, children of depressed mothers’ negative patterns of activity occurring in different brain reveals. This is for children of mothers who take more risks in the future is going to have depression.

May 9, 2011 at 3:36 pm

Thank you for this, helped a lot <3

May 11, 2011 at 10:44 pm

just what im looking for thanks

May 17, 2011 at 5:36 am


May 19, 2011 at 3:58 am

I am learning CSS3, this is a very useful tutorial for me, thanks!

May 26, 2011 at 12:20 am

this helps a lot
thank you so much

May 26, 2011 at 7:51 am

Can you view a website inside your website but it will automatically be smaller like the examples shown above ?

Jun 13, 2011 at 11:14 am

thank you so much

Mont Blanc Pen
Jun 13, 2011 at 9:47 pm

What is friendship?Mont Blanc PenWhy do we call a person our friend? When do we call someone a very good friend?

Mont blanc Pens
Jul 7, 2011 at 3:07 am

thank you so much

Aug 23, 2011 at 12:54 pm

And then he handed you the thirty-five 45

Jul 15, 2011 at 4:27 pm

This is verry good.

Tory Burch Sandals
Aug 6, 2011 at 4:53 am

I can wait to give it a shot ASAP after I get the pattern. Thank you for your punctuality on posting the tips which really help a lot!

mont blanc pens
Aug 23, 2011 at 2:34 am

a good article!
mont blanc pens

private investigator detective
Sep 15, 2011 at 12:43 am

R.Q. Investigations specializes in a range of investigator services. The private investigator detective offers you a high level intelligence and analysis service molded to suit your requirements and handles investigator services with personal care and diligence.

hip replacement recall
Sep 15, 2011 at 12:51 am

For depuy hip replacement recall information or regarding depuy hip replacement recall lawsuit , you can contact the expert New York personal injury lawyer.

wellensteyn jacken
Sep 28, 2011 at 10:24 am

Wellensteyn-Jacken werden getragen von qualitätsbewussten Menschen, für die Stil und Outdoor-Bekleidung keinen Gegensatz darstellt. So sind die funktionalen Jacken mittlerweile Alltag auf den Straßen deutscher und internationaler Großstädte.

Translation Services
Nov 11, 2011 at 10:11 am

I love the tutorials on this blog, keep up the good work.

Dec 31, 2011 at 12:12 am


Thanks for the lovely demo!
That really inspired me to keep reading.

Really great article!
Would it be to much to ask for a demo .css that one can download?
I just know there’s something I’m doing wrong cause my website I’m working on doesn’t change the when I browse it with my phone.

Thanks for all the tutorials and a Happy new year!

Jan 4, 2012 at 12:37 am

Good article!

How does this work when the user changes orientation? E.g. Portrait to Landscape and vice versa? Using the “max-width:480px” I have had trouble when I go from portrait to landscape on an iPhone the page looks great in portrait but then scales when I go to landscape.

Jan 17, 2012 at 12:11 pm

You saved me! i understood now this stuff. :) Beautiful site!

Jan 18, 2012 at 4:42 pm

Excellent tutorial, thank a lot. Worked like a charm!

Ivan Bayross
Feb 12, 2012 at 3:43 am

This is a superbly written tutorial. Its language is simple and easy to understand.

I thoroughly enjoyed reading and understanding its content. My drive is to create a flexible Joomla template based on the information I’ve read in this tutorial.

If you have a minute, please take a look at http://www.opensourcevarsity.com it has a ton of tutorials on opensource tools and technologies.

I wonder if you would consent to doing a Guest Post, or writing a tutorial for OSV.


Ivan Bayross

Madhab Saha
Feb 16, 2012 at 2:57 am

Please tell me how to solve in IE.

Feb 24, 2012 at 10:10 pm

dont worked in Chrome either

Manie Desfosses
Mar 5, 2012 at 7:42 am

This specific are getting to be good yet again routines when assists you to loosen all the spinal column and likewise sleep thoroughly without the go through on the subject of kind with your once again.

Helge-Kristoffer Wang
Mar 12, 2012 at 4:42 am

I love the articles on site! Mostly quality articles, and that’s what makes me come back! :) Keep up the good work!

Apr 15, 2012 at 6:09 pm

Good tips! Thanks :D

May 2, 2012 at 11:25 am

The closing date is May 2012 right ?a

The SEO & Translation Agency
May 9, 2012 at 6:04 am

A very useful post as mobiles are becoming such an important source of traffic and we are currently researching how to improve the experience for our users. Thanks a lot, will be coming back!

Al Lemieux
May 16, 2012 at 8:59 am

Everything worked except for max-device-width. Can you please explain the rationale behind using max-width vs. min-width. It’s a little confusing.

Jun 12, 2012 at 1:50 am

Very Clear tutorial Keep up the Good work……
Thank you so much.

Jun 12, 2012 at 1:53 am

Very Clear tutorial Keep up the Good work……
Thank you so much.
I am very much interested to know how to use the with Phone gap..

Jun 14, 2012 at 11:17 am

Great tutorial I was wondering how some websites change their layouts according to the window size .

Webdesign Twente
Jul 18, 2012 at 4:29 am

Very nice examples, keep up the good work :)

Dart Supplies
Aug 14, 2012 at 6:53 pm

Hi, the whole thing is going niсelу here and
οfcoursе еverу οnе is shaгіng facts, thаt’s really good, keep up writing.

Aug 19, 2012 at 9:17 pm

i see it! thank you!

Aug 24, 2012 at 12:05 am


Sep 3, 2012 at 12:03 am

Thanks Nick. I was looking for a ‘min width’ solution and yours as described worked perfectly.

Sep 7, 2012 at 4:14 pm

Nice tutorial but why I see the 4th box which should only appear on IPhones? Either Firefox or Chrome could interpret the device-width command… Or did I use it the wrong way??? Only max and min-width works for me, could you help me why?

Sep 23, 2012 at 1:50 pm

Thanks Nick, this is just a great explanation, covering all bases nicely. Hugely appreciated!

Lee Goddard
Oct 2, 2012 at 7:53 am

Thanks for the most comprehensive and legible page on the subject! Great stuff, as always.

Nov 24, 2012 at 9:27 pm

really enlightened me on media query as a new guy in the field of web design…

Nov 26, 2012 at 10:34 pm


Erneeraq Fleischer
May 30, 2013 at 10:19 am

I am trying to hide two modules, i have made custom css and put:

/* Smartphones */
@media (max-width: 480px) {
#full_left { display: none; }
#full_right { display: none; }

/* Smartphones to Tablets */
@media (min-width: 481px) and (max-width: 767px) {
#full_left { display: none; }
#full_right { display: none; }

/* Tablets */
@media (min-width: 768px) and (max-width: 959px) {
#full_left { display: none; }
#full_right { display: none; }

But they still shows in ipad/iphone…

Any idea?

Dymo Labels
May 31, 2013 at 2:41 am

hello sir
i really like your post
really nice collection
CSS3 media is best then CSS2

Post Comment or Questions

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