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