CSS – Making a Responsive Layout with Media Queries

This page contains a demonstration series outlining a method for designing a basic responsive grid layout with HTML and CSS. To first learn more about responsive design, you can watch the “Responsive Web Design: an Introduction” slideshow presentation.

RWD 00 – Envisioning Your Responsive Layouts (1:47)

RWD 01 – Drawing Wireframe in Google Drawing App (14:55)

This first tutorial walks you through how to use the free Google Drawing application to create a digital, vector drawing of the wireframe layouts for desktop, tablet, and phone page designs. The files created in this tutorial could also be drawn with pencil and paper, but it is an important first step no matter what tools you use to produce the drawings!

Here are the links to the drawings:

RWD 02 – Creating the HTML Document (14:34)

In this video you will see how to translate your drawing layouts into the basic HTML structure.

RWD 03 – Building the CSS Part 01 (13:28)

This demo picks up from RWD 02 so that you can start to design your CSS file. This is part one of the CSS portion of the responsive web design demo.

RWD 04 – Building the CSS Part 02 (14:59)

This tutorial finishes up the basic, large desktop view of the css. To learn how to style this site using media queries for other devices, watch the next lecture in the series, RWD 04 – Building the CSS Media Queries (Part 03).

SPECIAL UPDATE NOTE:

Remember that with CSS3 you can now use “box-sizing: border-box;” on elements so that you can add padding and/or borders to the same element without it increasing your overall intended width! This is especially useful when working within a grid framework so that you can avoid extra fussy math and not break your grid. This demo doesn’t use that, but adding it to the articles will make your life a lot easier.

RWD 05 – Building the CSS Media Queries – Part 03 (14:50)

This demo walks you through how to apply media queries for your different viewport-devices size layouts.

RWD 06 Building the CSS Part 04 (14:50)

This demo video shows you how to create CSS transitions with the easing effect between your responsive layouts. Additionally, you will learn how to use the”meta type=’viewport’…” tag for proper device scaling. (CORRECTION UPDATE: change “user-scalable=no” to have a value of “yes”. Users should ALWAYS be allowed to zoom for accessibility.) Lastly, you will also see how you can test online work through the use of a free web device emulator.

RWD 07 – Adding Responsive Navigation (13:50)

This demo covers how to add responsive navigation to the site.

RWD 08 – Linking Additional Layout Pages (14:56)

This demo will show you how to create different layout template pages based on your css and link them for ease of navigation.

Okay, so what about feature floats of varying lengths???

You might have noticed on pages with floated articles that the float stacking can get really messed up if the length of the content varies from article to article. To fix this problem, you need a way of applying a “clear” property to every fourth article tag in the largest screen view, and to every other article tag in the middle (tablet) screen view. To do this you can use pseudo ‘nth-of-type’ selectors that target every ‘nth’ of a specific type of selector. Here’s how you could adjust your css:

In the large view (min-width: 961px) media query, try adding this rule:

section.thirds article:nth-child(2n+1) {
	clear:none;
}
section.thirds article:nth-child(3n+1) {
	clear:left;
}

In the middle view (max-width: 960px) media query, add this rule:

section.thirds article:nth-child(2n+1){
        clear: left
}

Here’s what those will do:
The first one applies to the largest screen view, which floats three columns per block (‘article’ in this case). That means that every fourth article tag of its parent (3n+1) will get a clear:left property assigned to it so that it will not try to float in the available space above it, throwing off the layout. The (2n+1) clear:none is to reset the clear if being resized from larger than 960px (see next rule).

The second one targets the middle sized screens (typically tablets or partially closed viewports) where we only want to blocks per row. This will apply a clear:left property to every third item (2n+1) of the ‘article’ tag in their parent containers.

learn.