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.


1 6 7 8
  1. Agustín
    Aug 19, 2012 @ 9:17 pm

    i see it! thank you!


  2. muhsin
    Aug 24, 2012 @ 12:05 am



  3. Gary
    Sep 3, 2012 @ 12:03 am

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


  4. Florian
    Sep 7, 2012 @ 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?


  5. Lindsay
    Sep 23, 2012 @ 1:50 pm

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


  6. Lee Goddard
    Oct 2, 2012 @ 7:53 am

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


  7. Gentle
    Nov 24, 2012 @ 9:27 pm

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


    Nov 26, 2012 @ 10:34 pm



  9. Erneeraq Fleischer
    May 30, 2013 @ 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?


  10. Dymo Labels
    May 31, 2013 @ 2:41 am

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


  11. Steroids
    Feb 1, 2013 @ 5:17 am

    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.


1 6 7 8

Leave a Reply