Examples of flexible layouts with CSS3 media queries

Media queries let you to feed different CSS to users based on their viewport size (among other things), allowing you to create even more flexible layouts than ever before. See visual examples of real sites that use CSS3 media queries to make the layout more adaptable to the variety of screen sizes and devices in use today.

In my CSS3 presentation that I’ve given several times over the past year, the part that seems to impress the audience the most is my demonstrations of media queries. I’m with them. I think media queries are perhaps the most useful and exciting piece of all the great new stuff that’s new to CSS3.

While creating effective, attractive, flexible layouts that adapt to the user’s screen size has always been possible, media queries add another layer on top of flexible layouts to make them even more adaptable to an even wider range of sizes, allowing you to really fine-tune the experience for even more users. Media queries allow you to selectively feed styles based on the characteristics of the user’s display or device, such as how much width is available in the viewport, whether it’s in portrait or landscape mode, or whether it can display color.

My demonstration of media queries is the fictional Little Pea Bakery site, created for my book Stunning CSS3: A Project-based Guide to the Latest in CSS. Here’s how it looks for most users (shown here at 990 pixels wide):

The "default" layout seen by most users.

It’s a liquid (also known as fluid) layout so it can adapt to the user’s screen size, but the design doesn’t look as good and isn’t as readable when the viewport width is very narrow or very wide. I used media queries to solve this problem. Here’s how the page looks over 1200 pixels wide:

The layout for wide screens (over 1200 pixels) adds a third column.

Using a media query and just a few lines of CSS, I was able to easily turn the horizontal navigation bar into a vertical menu in a new third column. This kept the text line lengths from getting too long and making the overall design look too stretched out.

Going in the opposite direction, here’s what happens to the design under 760 pixels wide:

The layout for narrow screens.

We’re back to two columns, as in the “base” layout, but I’ve made changes to keep the content from appearing too squished and the line lengths getting too short. First, I got rid of the two columns in the introductory text. I also moved the three featured product boxes from sitting side-by-side to stacking on top of each other, moving the icon for each one from the top of the product box to the left side.

A third media query improves the design on small mobile screens, seen here at 480 pixels and 320 pixels:

The layout for very small mobile screens uses only one column.

The design is now a single column. The main page heading and introductory text are smaller, as are the product icons.

To see all these changes in action, view the page yourself and resize the browser window. To see how it was done, check out the CSS embedded in the head of the page. You can learn the full details, of course, by reading Chapter 6 of Stunning CSS3.

For more examples of flexible layouts that use media queries to further enhance the site’s adaptability, dubbed “responsive web design” by Ethan Marcotte, see the following sites. Small screenshots don’t do them justice, so be sure to click through to the sites and resize your browser window back and forth to get the full effect.

All of these sites use liquid layouts, but that’s not a requirement for using media queries. It’s also possible to use media queries to essentially create multiple fixed-width layouts that can be switched between on the fly. A few sites that do this are:

Know of any other great uses of media queries in the wild? Please share them in the comments!

Update 1/25/11:

I’ve learned about a few other resources for media queries/responsive layout inspiration:

Also, I’m bookmarking sites that I find to be nice examples of media queries on Delicious.

Related Posts:

Did you like this?

55 Responses to “Examples of flexible layouts with CSS3 media queries”

    • Zoe Gillenwater

      Yes, cssgrid.net looks cool! This blog post is older than it is, which is why it’s not in the list.

      Reply
      • Zoe Gillenwater

        Oops, strike my previous comment. I wasn’t paying close attention and thought you were commenting on a different, older post on my site! Sorry about that! Yes, cssgrid.net uses media queries itself in addition to providing CSS for you to implement media queries on your own sites, similar to the Less Framework.

        Reply
  1. Andrew Shanley

    I have just finished a friend of mines website (http://www.kiranowal.com/) which uses media queries to determine the size of the background photography (he’s a photographer) as well as the number of tweets that appear, among a few other tweaks. It fits on 800×600 up to and over 1920×1080 really well (I think). Let me know what you think or if there’s any ways to improve it!

    Reply
  2. Muditha Jayasinghe

    This look very nice but if this is only available in CSS3 then it is not ready for sites that need to serve a wide audience.

    Reply
  3. Tim Kadlec

    @Muditha – Actually, media queries are supported by Safari 3+, Chrome, Firefox 3.5+, and Opera 7+, as well as mobile browsers like mobile Webkit and Opera mobile. IE (pre 9) is the only holdout. You can easily get around that issue by using an approach like Jeremy Keith recently documented wherein he separates his styles into two CSS files and uses conditional comments to serve the layout up to versions of IE prior to 9.

    Reply
    • Zoe Gillenwater

      Right. There’s also a script you can just plug in to make your media queries work in IE 8 and earlier. It’s used in the Little Pea Bakery example shown.

      Reply
  4. Kenneth Nordahl

    Ive used media queries on my site to enable 3D transform on browsers that supports that. I use my own fluidCOLUMN system to dynamically change the site width depending on the viewport size.

    Reply
  5. Xavier Caine

    In Opera, in wide mode, the sidemenu is so and so and showing on load. Only after hover in most cases will they appear and stay shown.

    Reply
    • Zoe Gillenwater

      Yes, this is a bug I mention in my book. I haven’t tested it yet with Opera 11–have you?

      Reply
  6. werner

    Opera 11 wide mode 1200px – sidemenu problem
    I mentioned the same problem. What i did, was commenting out position:relative in headerDIV
    and for the form-searchDIV i changed right: 0; to right: 6%; to get the correct position for form-search to the right.
    This did the job for me in opera.Cannot tell you yet whether this affecting ie.
    firefox and safari seems to be correct.

    css main settings:
    #header {
    overflow: auto;
    /* position: relative; */
    margin: 0 0 20px 0;
    padding: 20px 0;
    }

    #form-search {
    position: absolute;
    top: 20px;
    /*right: 0; */
    right: 6%;
    }

    and many thanks to zoe for this excellent book and examples.

    Reply
    • Zoe Gillenwater

      Not sure what you mean about not being able to share this link? Share it where and how?

      Reply

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>