CSS - Anzeige: keine funktioniert nicht

Question

Ich werde keine Verbindung anzeigen, wenn die Gerätebreite kleiner als 480px ist. Dazu habe ich folgende CSS verwendet:

@media screen and (max-width:480px){ 
    .container{ 
     padding-left: 20px; 
     padding-right: 20px; 
    } 
    .content-area{ 
     padding-top: 20px; 
    } 
    .hide-small{ 
     display: none; 
    } 

} 

Die HTML ist:

<nav class="Nav-bar"> 
     <ul class="Group"> 

       <li ><a href="#">Home</a></li> 
       <li><a href="#">Services</a></li> 
       <li class="hide-small"><a href="#">About us</a></li> 
       <li><a href="#">Contact us</a></li> 
     </ul> 
</nav> 

Das Problem ist hide-small Klasse nicht den Link verstecken. Ich bin sicher, dass respektierte CSS-Datei auf HTML-Seite geladen wird. Aber wenn ich zum inspect -> Element gehe, hat der li Umbau nicht die hide-small Klasse. Es stellte die li wie dies ohne Klasse:

<li><a href="#">About us</a></li> 

Wie kann ich es beheben?

Answer 1

Es funktioniert! ..

http://hpics.li/b181647 und http://hpics.li/5ea4dc0

die Anzeige nur, wenn Breite 480px oder unter

Sie die Breite mit diesem Test können:

<script> 
     function getWidth() { 
      if (self.innerHeight) { 
      return self.innerWidth; 
      } 

      if (document.documentElement && document.documentElement.clientWidth) { 
      return document.documentElement.clientWidth; 
      } 

      if (document.body) { 
      return document.body.clientWidth; 
      } 
     } 

     alert(getWidth()); 
    </script> 

Answer 2

Wahrscheinlich überschreibt eine andere CSS-Eigenschaft Ihre Klasse. Versuchen Sie es mit:

display: none !important;