title: How do I change a CSS class per @media screen?
body: <p>I have a simple div box with text i want to format differently depending on if the user is viewing in desktop/tablet/laptop or mobile device. I am trying to use <code>@media screen</code> but maybe I'm doing it wrong. Here is what I tried:</p>
  <pre><code>.topbox {
  position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      z-index: 9999;
      height: 100px; 
      padding: 20px 10px;
  }
  
  @media only screen and (max-width: 600px) {
  .topbox {
      background: #9b4fe0;
      width: 300px;
          }
  }
  @media only screen and (max-width: 800px) {
  .topbox {
      background: #ff5000;
      width: 600px;
          }
  }
  </code></pre>
  <p>In my head I have:
  <code>    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no&quot;&gt;</code></p>