title: Responsive CSS for phones/small screens
body: <p>I am trying to setup a basic responsive wordpress theme. To start, I grabbed the toolbox theme from wordpress.org and added <a href="http://twitter.github.com/bootstrap/scaffolding.html#responsive" rel="noreferrer">twitter bootstrap</a> responsive css/js.</p>
  
  <p>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.</p>
  
  <p>You can view my site <a href="http://mrglass.org" rel="noreferrer">here</a>.</p>
  
  <p>My responsive CSS code:</p>
  
  <pre><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;
      }
  }
  </code></pre>