Responsive CSS for phones/small screens

Question

I am trying to setup a basic responsive wordpress theme. To start, I grabbed the toolbox theme from wordpress.org and added twitter bootstrap responsive css/js.

I added some basic test styles, just to reduce the padding on smaller screens and change the color to indicate that its working. For some reason, the styles for landscape phones are not working.

You can view my site here.

My responsive CSS code:

/* Large desktop */
@media (min-width: 1200px) { 
    body    {
        padding-left: 50px;
        padding-right: 50px;
        color: green;
    }
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 1199px) { 
    body    {
        padding-left: 30px;
        padding-right: 30px;
        color: purple;
    }
}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { 
    body    {
        padding-left: 20px;
        padding-right: 20px;
        color: blue;
    }
}

/* Landscape phones and down */
@media (max-width: 480px) { 
    body    {
        padding-left: 5px;
        padding-right: 5px;
        color: red;
    }
}

Answer 1

It looks like you haven't set the meta tag for viewport properly:

It should be like below:

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