Responsive CSS for phones/small screens

Problem

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;
    }
}
Problem courtesy of: MrGlass

Solution

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;" />
Solution courtesy of: defau1t

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.