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: 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;
}
}