Web Designer Wall
Layout

Responsive Design with CSS Media and Container Queries

By Aigars Silkalns Updated 11 min read

Responsive Design with CSS Media and Container Queries

Responsive design today comes down to four things: a correct viewport meta tag, layouts that are fluid by default, a handful of media queries for page-level changes, and container queries for components that need to adapt to the space they are given. This tutorial builds one small blog layout, a header, a card list and a sidebar, with exactly that toolkit, and explains why each piece is there. At the end you get the full stylesheet in one block.

The original version of this article, written in 2011, split the work between a fixed 980px wrapper and three max-width queries tuned to specific devices, plus JavaScript shims for Internet Explorer. None of that is needed now. Media queries are supported everywhere, and the modern approach starts from flexible layout and adds breakpoints only where the design actually breaks.

What you are building

A page with a site header, a list of article cards, a row of topic links, a sidebar and a footer. On wide screens the sidebar sits beside the cards. On narrow screens it drops below them. Independently of that, each card stacks its thumbnail above the text when it is narrow and puts them side by side when it has room.

Blog layout at desktop width with article cards on the left and a sidebar on the right
Desktop: cards and sidebar sit side by side, and each card shows its thumbnail beside the text.
The same layout at phone width with a single column and stacked cards
Phone: one column, with each card stacked and the topic links wrapping into rows.

Step 1: Set the viewport meta tag

Without this tag, as the MDN viewport reference explains, mobile browsers lay the page out on a virtual desktop-width canvas and scale it down, so your media queries never see a small screen. Put this in the <head> of every page:

<meta name="viewport" content="width=device-width, initial-scale=1">

Use commas as separators; the semicolons in older tutorials are non-standard. Do not add user-scalable=no or maximum-scale=1. They block pinch zoom, which is an accessibility failure for people who need to enlarge text.

Step 2: Write semantic HTML

Every current browser understands header, nav, main, article, aside and footer, so the HTML5 shim script and the "reset to block" rule from the old tutorial are gone. Here is the structure:

<div class="wrap">
  <header class="site-header">
    <h1 class="logo">Demo Journal</h1>
    <nav aria-label="Main">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Articles</a></li>
      </ul>
    </nav>
  </header>

  <div class="layout">
    <main class="posts">
      <div class="post-wrap">
        <article class="post">
          <img class="thumb" src="thumb.svg" width="400" height="300" alt="" loading="lazy" decoding="async">
          <div>
            <h2>Layouts that respond to space</h2>
            <p>Card text goes here.</p>
          </div>
        </article>
      </div>
    </main>

    <aside class="sidebar" aria-label="Sidebar">
      <section class="widget">…</section>
    </aside>
  </div>

  <footer class="site-footer">Footer</footer>
</div>

The extra .post-wrap around each card exists for Step 6: a container query needs a parent to measure.

Step 3: Make the foundation fluid

This is the part that replaces the fixed 980px wrapper. Three rules do most of the work.

:root {
  --gap: clamp(1rem, 2.5vw, 2rem);
  --measure: 70rem;
}

*, *::before, *::after { box-sizing: border-box; }

img, video, iframe { max-width: 100%; height: auto; }

.wrap {
  width: min(100% - 2 * var(--gap), var(--measure));
  margin-inline: auto;
}
  • box-sizing: border-box makes padding count inside an element's width, so percentages and fixed paddings stop fighting each other.
  • max-width: 100%; height: auto keeps media inside its container and preserves the aspect ratio. The width: auto\9 hack for IE8 is dead code. Also put real width and height attributes on your <img> tags so the browser can reserve space and avoid layout shift while images load.
  • min() gives the wrapper a gutter on both sides and a maximum width in a single declaration, with no breakpoint at all. clamp() lets the gap grow smoothly between a minimum and maximum.

Set sizes in rem rather than px where you can. They follow the user's browser font-size setting, which is another small accessibility win.

Step 4: Build the layout with Grid, not floats

The old layout used a 600px floated column and a 280px floated sidebar, with percentage widths added in a media query. CSS Grid describes the same idea directly:

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18rem;
  gap: var(--gap);
  padding-block: var(--gap);
}

The sidebar is a fixed 18rem and the content takes everything left over. minmax(0, 1fr) matters: a plain 1fr has an implicit minimum of its content's size, so a wide code block or table can push the column past the viewport. Setting the minimum to 0 lets the column shrink and lets overflow be handled inside the content.

For the header, Flexbox is the better fit, since it is a one-dimensional row that should wrap when it runs out of space:

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
  padding-block: 1.25rem;
}
.site-header nav { margin-inline-start: auto; }
.site-header ul { display: flex; flex-wrap: wrap; gap: 0.25rem; list-style: none; margin: 0; padding: 0; }

Because the lists wrap by themselves, the header never needs a media query. If you want a refresher on these two layout systems, see Master CSS Flexbox in 5 Simple Steps and The Simpler CSS Grid.

Step 5: Add a media query for the page-level change

Something still has to move the sidebar under the content on small screens. That is a decision about the whole page, so a media query is the right tool:

@media (width <= 50rem) {
  .layout { grid-template-columns: minmax(0, 1fr); }
}

This uses the range syntax, which reads like a comparison and replaces max-width. It has been Baseline since 2023, so it works in every current browser (see MDN on the Level 4 syntax). The older (max-width: 50rem) form is equivalent if you need to support an older toolchain.

Choose the breakpoint by resizing the window until the design looks bad, not by picking an iPhone or iPad width. Devices change every year, and your content does not care what they are. We covered the reasoning in Setting Breakpoints in Responsive Design. Write breakpoints in rem so they follow the user's font size as well as the screen size: someone who enlarges their text reaches the single-column layout sooner, which is what they need.

One thing from the old tutorial deserves a mention: -webkit-text-size-adjust: none. Do not use it. Disabling text size adjustment stops users from enlarging text in some browsers, and phones no longer need it when the viewport meta tag is set correctly.

The layout at tablet width: one column with the sidebar widgets below the cards, and each card keeping its thumbnail beside the text
At 768px the page is single-column and the sidebar has dropped below the cards, yet each card still has room for a side-by-side thumbnail.

Step 6: Let components respond to their own container

Look at that tablet screenshot. The viewport is narrow, but the cards are wide, so a side-by-side card is correct. At desktop width the cards are narrower than they would be on a tablet, because the sidebar takes space. A viewport media query cannot express this, because it only knows the window size. A container query measures the component's parent instead:

.post-wrap { container: post / inline-size; }

.post {
  display: grid;
  gap: 1rem;
}

.post h2 { font-size: clamp(1.2rem, 1rem + 3cqi, 1.8rem); }

@container post (width >= 32rem) {
  .post {
    grid-template-columns: 12rem 1fr;
    align-items: start;
  }
  .post .thumb { aspect-ratio: 1; }
}

The first line makes .post-wrap a size container named post, measured along the inline axis. The @container rule then applies when that container is at least 32rem wide. A container cannot style itself, which is why the cards need a wrapper: the wrapper is measured and the card inside is restyled.

The cqi unit is 1% of the container's inline size, so the heading scales with the card rather than the window. The same card now works in the main column, in a sidebar or in a modal without any extra rules. Size container queries and container query units reached Baseline in 2023 (Baseline, MDN).

A practical rule: use media queries for the page frame (navigation, columns, global spacing) and container queries for reusable components (cards, widgets, form groups).

Step 7: Respect user preferences

Responsive design is no longer only about width. Media queries also let you respond to how a person uses their device. Two worth adding to almost every project:

@media (prefers-reduced-motion: no-preference) {
  .post { transition: translate 0.2s; }

  @media (hover: hover) {
    .post:hover { translate: 0 -3px; }
  }
}
  • prefers-reduced-motion: no-preference wraps any motion, so people who ask their system for less movement do not get it.
  • hover: hover limits hover effects to devices that can actually hover. On a touchscreen, hover styles can stick after a tap.

Also give every link and button a visible :focus-visible style, and keep tap targets at least about 44px tall on touch layouts. The demo's nav links use padding: 0.6rem 0.9rem for that reason. The complete stylesheet is at the end of the article, after the last two steps.

Step 8: Serve the right image to each screen

Fluid images only solve half the problem: a phone should not download a 1600px photo to show it 390px wide. The srcset attribute lists the files you have and their real widths, and sizes tells the browser how wide the image will be displayed, so it can choose before layout is known:

<img
  src="photo-800.jpg"
  srcset="photo-480.jpg 480w, photo-800.jpg 800w, photo-1600.jpg 1600w"
  sizes="(width <= 50rem) 100vw, 800px"
  width="1600" height="900"
  alt="Describe what the photo shows"
  loading="lazy" decoding="async">

In a quick test with this markup, a 390px-wide viewport picked photo-480.jpg and a 1280px viewport picked photo-800.jpg. The width and height attributes reserve space, so nothing jumps when the file arrives. Use loading="lazy" for images below the fold, but never for the main image at the top of the page, which should load as early as possible. decoding="async" lets the browser decode off the main thread. See MDN's responsive images guide for the full model.

When the image should be cropped differently rather than just scaled, which is called art direction, wrap it in <picture>:

<picture>
  <source media="(width <= 40rem)" srcset="crop-square.jpg">
  <img src="photo-800.jpg" width="1600" height="900" alt="Describe what the photo shows">
</picture>

On a narrow screen the square crop replaces the wide photo, and the plain <img> remains the fallback and carries the alt text. The same element is where you add modern formats such as AVIF or WebP with a type attribute on additional <source> elements. For video embeds, skip the old padding-bottom wrapper and give the iframe width: 100%; height: auto; aspect-ratio: 16 / 9.

Step 9: Modern viewport and layout tools

Four small features round out a layout like this one:

  • Viewport unit variants. On phones, 100vh is measured as if the browser toolbar were hidden, so full-height sections get cut off. Use svh (toolbar showing), lvh (toolbar hidden) or dvh (follows the toolbar as it moves). The demo's min-height: 100svh is the safe default. They have been Baseline widely available since late 2022.
  • Balanced headings. text-wrap: balance evens out line lengths in short blocks such as headings, which avoids a single orphaned word on a narrow card. It is newly available in all major browsers, and older ones simply ignore it.
  • Breakpoint-free grids. The topic links use repeat(auto-fit, minmax(min(100%, 10rem), 1fr)): as many columns of at least 10rem as fit, sharing the leftover space. Without a single media query it shows 6, 4 or 2 per row as the screen narrows. The inner min(100%, 10rem) stops a column from overflowing in a very narrow container.
  • Rem-based queries. Both the page breakpoint and the container breakpoint are written in rem, so enlarging the default font size switches layouts earlier.

Full CSS

Here is the complete stylesheet for the demo, with every rule from the steps above. Save it as demo.css, link it from the HTML in Step 2 and use any three images for the cards.

/* Full stylesheet for the demo: paste it into a file next to the HTML from Step 2 */
:root {
  --bg: #fafaf7;
  --ink: #1d2330;
  --muted: #5b6475;
  --card: #fff;
  --line: #e4e2da;
  --accent: oklch(55% 0.17 255);
  --gap: clamp(1rem, 2.5vw, 2rem);
  --measure: 70rem;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100svh;
  font: 1rem/1.6 system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
}

img, video, iframe { max-width: 100%; height: auto; }

.wrap {
  width: min(100% - 2 * var(--gap), var(--measure));
  margin-inline: auto;
}

/* Header: flex row that wraps by itself */
.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--line);
}
.logo { margin: 0; font-size: clamp(1.4rem, 1.1rem + 1.5vw, 2rem); }
.site-header nav { margin-inline-start: auto; }
.site-header ul { display: flex; flex-wrap: wrap; gap: 0.25rem; list-style: none; margin: 0; padding: 0; }
.site-header a {
  display: block;
  padding: 0.6rem 0.9rem;
  border-radius: 0.5rem;
  color: var(--ink);
  text-decoration: none;
}
.site-header a:hover,
.site-header a:focus-visible { background: color-mix(in oklch, var(--accent) 12%, white); }

/* Page layout: content plus sidebar, one column on narrow screens */
.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18rem;
  gap: var(--gap);
  padding-block: var(--gap);
}
@media (width <= 50rem) {
  .layout { grid-template-columns: minmax(0, 1fr); }
}
.posts { display: grid; gap: var(--gap); align-content: start; }

/* Cards respond to their container, not the viewport */
.post-wrap { container: post / inline-size; }
.post {
  display: grid;
  gap: 1rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 1rem;
  padding: 1.25rem;
}
.post .thumb {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 0.6rem;
}
.post h2 {
  margin: 0 0 0.4rem;
  line-height: 1.2;
  text-wrap: balance;
  font-size: clamp(1.2rem, 1rem + 3cqi, 1.8rem);
}
.post p { margin: 0; color: var(--muted); }
@container post (width >= 32rem) {
  .post { grid-template-columns: 12rem 1fr; align-items: start; }
  .post .thumb { aspect-ratio: 1; }
}

/* Breakpoint-free link grid */
.topics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: 0.75rem;
}
.topics a {
  padding: 0.8rem 1rem;
  text-align: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  color: var(--ink);
  text-decoration: none;
}

.sidebar { display: grid; gap: 1rem; align-content: start; }
.widget { background: var(--card); border: 1px solid var(--line); border-radius: 1rem; padding: 1.25rem; }
.widget h3 { margin: 0 0 0.5rem; }
.site-footer { padding-block: 2rem; color: var(--muted); border-top: 1px solid var(--line); }

/* User preferences */
@media (prefers-reduced-motion: no-preference) {
  .post { transition: translate 0.2s; }
  @media (hover: hover) {
    .post:hover { translate: 0 -3px; }
  }
}

Testing

Drag the window from very narrow to very wide and add a breakpoint only where something breaks. Then zoom to 200%, raise the browser's default font size, emulate prefers-reduced-motion in DevTools, and open the page on a real phone at least once. A responsive layout should survive all of it.

Summary

Start fluid (min(), clamp(), Grid with minmax(0, 1fr)), use one media query for the page frame, let components adapt with container queries, and ship images with srcset. For the underlying ideas, see CSS3 Media Queries and Responsive Design in 3 Steps. Once the header needs a collapsing menu, our responsive navbar with offcanvas menu is a ready-made starting point, and Four Elements of Truly Mobile-Friendly Responsive Menus covers the design thinking.

141 comments from the archive

  1. quality stuff…

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

    thanks for sharing.. :)

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

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

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

    1. 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,
      G.

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

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

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

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

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

    Thanks!!!

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

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

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

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

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

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

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

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

  17. 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 :)

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

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

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

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

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

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

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

      Simplebits uses this:

      I tried it, and it fixed the problem.

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

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

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

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

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

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

    }

  28. @scott

    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 ){
    document.writeln(”);
    }else{
    document.writeln(”);
    }

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

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

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

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

    HLR

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

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

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

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

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

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

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

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

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

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

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

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

  48. 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!
    Adam

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

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

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

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

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

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

    to

    Have fun!

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

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

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

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

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

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

  63. Wow,
    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….

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

  67. 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?
    thanks

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

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

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

  71. Hi,

    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?

    Thanks,
    Jason

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

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

    1. Some good reasons I can see:

      respond.js has just been stripped out of the Modernizr builder (citing performance concerns): https://github.com/Modernizr/Modernizr/issues/348

      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.

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

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

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

  78. 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.. :)

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

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

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

      1. What is worse than a virus?

        Resposive webdesign?

        It’s a true blessing my friend!

        Rob

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

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

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

  85. Hi!
    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

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

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

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

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

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

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

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

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

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

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

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

  97. 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: perfectlyplannedoccasions.co.uk… any suggestion

  98. 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 :(

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

  100. Excellent, first time learning responsive and it doesn’t take me that long with this clear tutorial. Thanks
    Question:
    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?

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

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

    Any clue? Thanks

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

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

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

    SwamyG

  106. 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 :)

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

      Cheers.

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

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

  109. 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!
    Steve

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

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

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

  113. 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)?

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

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

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

  117. Hi

    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 ?

    Thanks

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

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

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

  122. 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.
    Thanks.
    Pressure Washers

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

  124. Hi Iam Rudresh,From India ,

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

Comments are closed on this article.