RWD (Part 2): Make it Responsive!

How to Make it Responsive!

To demonstrate how to make a page responsive, we took an existing web page and made it flexible in Part 1

In the tutorial below, we’ll take a flexible HTML5 Two Column Layout and turn the web page into a responsive layout by adding the media queries.

Demo page:

But first,

What does it take to create a responsive design?

Three core ingredients:

1. A flexible, grid-based layout
2. Flexible images and media
3. Media queries

Flexible images

img {
max-width: 100%;

The max-width: 100%

the max-width: 100% rule can also apply to most fixed-width elements, like video and other rich media

video {
max-width: 100%;

Be sure to do the following:

  • In the HTML, remove height on all images.
  • Add the following code to the head of your HTML document
<meta name="viewport" content="initial-scale=1.0, width=device-width" />

Add Media Queries to the end of your CSS

@media screen and (max-width: 768px) {

#wrapper {


@media screen and (max-width: 520px) {

#content {
padding-top: 25px;
background-color: #FFF;

#rightcol {


For more information about Media Queries

Leave a Reply

Your email address will not be published.