Responsive Web Design

Introduction to Responsive Web Design Tutorial

A responsive web design is based on conditional CSS.

With conditional CSS, different styles kick in, when the browser is made a certain size.
e.g. when the window is a certain width, change the layout from 3 columns to 2

In addition to your normal stylesheet, create a stylesheet called responsive.css

Attach it to your html like this:

To create areas and divs that change when the website width is less than 500px:
1. Name a class for the divs in your html that you want to be responsive. The class name should end with “mobile-collapse”. In this instance, you should name the columns in this class.

2. Add this code to the responsive.css stylesheet:

Now when the website is reduced to a size less then 500px in width, all the elements within the div classes ending with “mobile-collapse” should become styled with auto width, no float and a right margin of 0.

The “@media screen” tells the browser that this is a Media Query and that it should be called when the browser is a certain width.

Hopefully this explains the concept behind responsive design. Different styles will be called/initiated when the browser window is a certain size.

In order to hide certain elements of the webpage when it reaches 500px or less, add the “display.none” style to the responsive css stylesheet

and name the div classes, in the html, so they end with hide-mobile

ScreenShot from http://www.youtube.com/watch?v=F_fhyXUH_To

For the Nav Bar –
Add the following code in the responsive CSS stylesheet, it will change the width and font-size of the nav bar when the screen width is 620px and 500px: