How to create a responsive layout in a few easy steps.
by Jordan Lev
Tell the browser that the page should be sized to the width of the device or browser window itself (not the "desktop" page size) by putting this in your HTML <head>:
Tell the browser to treat padding and border widths as part of the overall element width (so we can sanely use percentages for element widths) by putting this in your CSS:
Sets a maximum width for the layout on wide (desktop) screns.
Rows are containers for columns -- a row will always be placed underneath a prior row, regardless of screen width.
Columns are containers for the actual page content -- they will line up next to each other on wide screens, or underneath each other on narrow screens.
Set the screen width at which the columns should be displayed underneath one another as opposed to next to each other.
To ensure your layout works with old versions of Internet Explorer, add the following to your HTML <head>:
And to ensure your layout will continue to work with future browsers, add the following to your CSS:
The above steps represent all the basics you need to know to create reponsive layouts. But here are more things you might want to consider:
row class to group, and column to item (since they are not really "rows" or "columns" on narrow width screens).