Using CSS Media Queries for basic Responsive Design

Note: This isn’t a fully comprehensive guide to responsive design or media queries, nor does it fully explain them. It’s more for practical examples of how to use media queries to get a responsive design.

Using CSS Media queries to create a responsive design is actually a lot simpler than you might think. Before anything, you need to set your viewport to be the same dimensions as the browser window:

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>

This needs to be added along with the other meta tags if you don’t have it already (in the <head> section, in case you don’t have any other meta tags.) In my experience, this isn’t needed too much for desktop browsers, but rather for mobile device browsers.

Here’s an example of a media query:

@media screen and (max-width:400px){
#container {width: 400px;}

In this example, all devices that use a screen (print is a common alternate) and have a max-width of the container of 400px, it’ll kick in with this css. In the simplest terms possible: with this code, if your window is less than 400px wide, it’ll use the new css. You can also do it for orientation (portrait or landscape) in the same way as the width is controlled in the above example, which can be useful for when a mobile device is in landscape.

The main thing you’d want to do with a CSS media query for an effective responsive is altering the number of columns you have. Lets have a look at a quick example i’ve set up over at


The example page has two divs, red and blue, that float next to each other. They’re both inside a container div, appropriately named container. Here’s the CSS for them:

#container {width:800px ;margin:0 auto;}
#red, #blue {width:400px; display:block; height:400px;}
#red {background:#f00; float:left; }
#blue {background:#00f; float:right;}

Red and blue both have a width of 400px, so a combined width of 800px. When the page is smaller than 800px, obviously some of blue would get cut off. So we add in a Media Query to deal with the width being less than 800px:

@media screen and (max-width: 800px){
#container {width: 600px;}
#red, #blue {float:none; margin:0 auto;}

Which means, when the window is smaller than 800px wide, the container is now only 600px wide (200px narrower) and the floats are turned off, changing the layout from 2 column to one column. It looks like this:


I’ve also added in another media query, that’ll kick in when the browser is less than 600px wide. This one just makes the container 400px wide, the width of our red and blue divs:

@media screen and (max-width: 600px){
#container {width: 400px;}

Finally, we want it to deal with when the window is smaller than 400px – the width of red and blue. For this, we want to switch it to a fluid width (using a percentage) to display as much as possible horizontally:

@media screen and (max-width: 400px){
#container {width: 100%;}
#red, #blue {width: 100%;}

And it ends up looking like this:


And there we have it! an example of how a page can be responsive to allow the information to be viewed on as many different devices as possible. Two quick final points to consider though:

  1. I’ve only used max-width in these examples. This means you can have the css from each media query stack, as it fits multiple criteria. For a little more control, you’ll probably want to combine with min-width criteria.
  2. This is the most common example of why you’d use responsive design – to scale down for mobile devices. Not much seems to scale up with responsive design, which is a shame – there are many people running with monitors of 1366, 1440, 1600, 1920 and even 2560 pixels wide. A lot of this space, doesn’t get used. If you want to display a lot of content with little scrolling, responsive design would be excellent for this too.

Leave a Reply

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

6 × = six

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