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:
<link rel=”stylesheet” href=”css/responsive.css” media=”screen and (max-width: 900px)”>
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.
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
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:
I used the custom css option to make my free wordpress theme responsive on this site for Online Personal Training.
Try resizing that bad boy