title: @media screen css property not working
body: <p>I added <code>@media screen</code> css in an effort to change my website but it doesn't seem to be responding. I added  meta <code>name = "viewport" content="width=1200, width=device-width"</code> to the HTML and that was the only thing that effected the way my site looks on my phone. In the CSS I added the following but it has no effect. </p>
  
  <pre><code>@media screen
  and (max-device-width: 768px)
  and (orientation: portrait) {
     body {
     max-width: 600px;
  }
     #sidebar {
       width: 0;
     }
  }
  
  @media screen
  and (max-device-width: 1000px)
  and (orientation: landscape) {
    body {
      max-width: 800px;
    }
      #sidebar {
          width: 0;
      }
  }
  </code></pre>
  
  <p>So how do I: </p>
  
  <ul>
  <li><p>Get this to work, is my CSS wrong?</p></li>
  <li><p>Is there a way to specifically get rid of the <code>#sidebar</code> in <code>@media screen</code> css?</p></li>
  </ul>