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: http://www.everythingaboutweb.com/classes/examples/html5-two-column-style-responsive/

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

img,
embed,
object,
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 {
width:100%;
}

}

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

#content {
width:100%;
padding-top: 25px;
float:none;
background-color: #FFF;
}

#rightcol {
width:100%;
float:none;
}

}

For more information about Media Queries