title: Css display none not working
body: <pre><code>@media screen and (min-width: 900px) and (max-width: 1215px) {
   #menu {
        display:none;
     }
  }
  </code></pre>
  
  <p>This is not working, the div is still visible. However, if I change the div to <code>&lt;div class="menu"&gt;</code> instead of <code>&lt;div id="menu"&gt;</code> and the css :</p>
  
  <pre><code>@media screen and (min-width: 900px) and (max-width: 1215px) {
     .menu {
         display:none;
     }
  }
  </code></pre>
  
  <p>it works. Why is this happening? </p>
  
  <p><em><strong>EDIT</em></strong></p>
  
  <p>This is what Inspector says: </p>
  
  <pre><code>element {
      display: block;
  }
  #listMenuTop {
      display: none;
  }
  #listMenuTop {
      display: none;
      margin-bottom: -14px;
      margin-top: 10px;
  }
  </code></pre>
  
  <p>But both display:none are crossed. Where does the display: block; comes from ?</p>
  
  <p><em><strong>EDIT 2</em></strong></p>
  
  <p>I found the problem. A js function was overwriting the css display property:</p>
  
  <pre><code>document.getElementById('listMenuTop').style.display='block';
  </code></pre>
  
  <p>What I want to do is to hide #listMenuTop when screen >= 900px and when screen &lt; 900px to be able to display/hide #listMenuTop from a button. The problem is that when #listMenuTop is displayed on a screen &lt; 900px it doesn't hide if i resize screen to more than 900px, because that js function is always overwriting the display property. </p>