To test this page, resize the browser window

You should install this Chrome extention and use Chrome to view this page https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh?hl=en

This box will turn to pink if the viewport width (which is slightly smaller than the browser window width) is less than 600px

This box will turn to orange if the viewport width (which is slightly smaller than the browser window width) is greater than 900px

This box will turn to blue if the viewport width (which is slightly smaller than the browser window width) is between 600px and 900px

This box will only apply to devices with max-device-width: 480px (ie. iPhone)

Your current viewport width (which is slightly smaller than the browser window width) is: less than 600px between 600 - 900px greater than 900px

You MUST put the following code in the head of your page so that the webpage will check if you are viewing the page on a mobile device. Without the following code, the page will be treated with no "responsiveness" or will not respond to your design changes based on the size of the device.

<meta name="viewport" content="width=device-width" />

There are two ways to think about how you want your website to respond to devices

Change the website according to device displaying the site, not the design
Change the website according to design, not the device displaying the site

OPTION 1: CSS breakpoints according to device, not design (NOT RECOMMENDED)

@media only screen and (min-width:320px) { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */

}
@media only screen and (min-width:480px) { /* smartphones, Android phones, landscape iPhone */

}
@media only screen and (min-width:600px) { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */

}
@media only screen and (min-width:801px) { /* tablet, landscape iPad, lo-res laptops ands desktops */

}
@media only screen and (min-width:1025px) { /* big landscape tablets, laptops, and desktops */

}
@media only screen and (min-width:1281px) { /* hi-res laptops and desktops */

}

The problem with designing according to device is that new devices with different dimensions keep coming out. Keeping your website responsive to all devices can take away your time from what you really want to do.

Note: min-width:480px will respond on a desktop with a small browser window but min-device-width:480px will respond only if viewing on a mobile device

OPTION 2: CSS breakpoints according to design, not device (RECOMMENDED)

Version 1- simplest version - one design for tablets, laptops and desktops and a 2nd design for smaller mobile devices:

@media only screen and (min-width: 1024px) {/* works for tablets, laptops and desktops*/

}
@media only screen and (max-width: 1023px) {/* works for smaller mobile devices*/

}
DEMO

Version 2 - somewhat more specific:

@media only screen and (max-width: 480px) {/* for smaller older mobile phones*/

}
@media only screen and (min-width: 481px) and (max-width: 768px) {/* for some mobile phones, tablets and some smaller screen laptops*/

}
@media only screen and (min-width: 769 px) and (max-width: 1024px) {/* for larger screen laptops and desktops*/

}
@media only screen and (min-width: 1025px) {

}

Version 3:

@media only screen and (min-width: 320px) {

}
@media only screen and (min-width: 500px) {

}
@media only screen and (min-width: 610px) {

}
@media only screen and (min-width: 650px) {

}
@media only screen and (min-width: 800px) {

}
@media only screen and (min-width: 1020px) {

}
@media only screen and (min-width: 1220px) {

}
@media only screen and (min-width: 1450px) {

}

Note:

Use %, not fixed px widths for div dimensions
Use ems for fonts
For smaller devices, remove any large background image
For smaller devices, change large header or logo images with smaller versions for faster loading
For smaller devices, design for ONE column or linearize - use float:none and width:auto
For mobile devices, there is no hover state
For smaller devices, change image buttons to text buttons and add padding to text and display:block
To link external style sheets, use something like <link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="small-device.css" />

Resources and articles

To test this page, resize the browser window

Your current viewport width (which is slightly smaller than the browser window width) is: less than 600px between 600 - 900px greater than 900px

<meta name="viewport" content="width=device-width" />

Change the website according to device displaying the site, not the design

Change the website according to design, not the device displaying the site

OPTION 1: CSS breakpoints according to device, not design (NOT RECOMMENDED)

OPTION 2: CSS breakpoints according to design, not device (RECOMMENDED)