How to create a responsive design using CSS3

Do you want to create a responsive design on your next project? Here's how!

Step 1: Add two lines of code in the head-section of your website.

<meta name="viewport" content="width=device-width, initial-scale=1" /> 
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />

Step 2: Add this CSS in your stylesheet:

/* DESKTOP */
/* Your desktop CSS goes here. This CSS will affect browsers with a width of 961 pixels or more + all the older browser that's not supporting CSS3. */

/* TABLET */
@media only screen and (min-width: 601px) and (max-width: 960px) {

/* Your tablet CSS goes here. This CSS will only affect devices with a minimum width of 601 pixels and a maximum width of 960 pixels. */

}

/* MOBILE */
@media only screen and (max-width: 600px) {

/* Your mobile CSS goes here. This CSS will only affect devices with a  maximum width of 600 pixels. */

}

...and your done! That's it! Usually, it's easier (and smarter) to use percentage-width on your elements, instead of pixels. This will make the website float a whole lot better.