Div nicht mit Medienabfragen und Anzeige ausblenden: keine;

Question

Ich habe eine div, die ich auf kleinen mobilen Geräten verstecken möchte, wie es unter dem Logo gleiten würde. Ich habe andere Elemente, die ohne Problem funktionieren, aber dieses hier habe ich Probleme mit dem Verstecken. Ich möchte die div id "tagline" verstecken, aber es versteckt sich nicht.

<div class="container"> 
<div id="logo"><a href="../index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Nucleo-Logo','','../images/logo-over.png',1)"><img id="Nucleo-Logo" src="../images/logo.png" alt="Nucleo Fitness, Rapid City, SD" /></a> </div> 
<div id="tagline"><img src="../images/get_to_the_core.png" alt="Get to the core."/> <br/><h4>605-430-1418</a></h4></div> 
</div> 

Jetzt sieht mein CSS wie folgt aus:

#tagline{float:right; z-index:1; display:inline-block; margin-top:-75px; margin-right:15%;} 
@media(max-with:600px) { 
#tagline{display:none; visibility:hidden; clear:both;}} 

Answer 1

• max-withmax-width
• in Ihrem HTML sollten Sie </a> haben, aber es ist nie geöffnet (nach 605-430-1418)

#tagline { 
 
    float: right; 
 
    z-index: 1; 
 
    display: inline-block; 
 
    margin-top: -75px; 
 
    margin-right: 15%; 
 
} 
 

 
@media (max-width: 600px) { 
 
    #tagline { 
 
     display: none; 
 
     visibility: hidden; 
 
     clear: both; 
 
    } 
 
}

<div class="container"> 
 
    <div id="logo"> 
 
     <a href="../index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Nucleo-Logo','','../images/logo-over.png',1)"><img id="Nucleo-Logo" src="../images/logo.png" alt="Nucleo Fitness, Rapid City, SD" /></a> 
 
    </div> 
 
    <div id="tagline"> 
 
     <img src="../images/get_to_the_core.png" alt="Get to the core." /><br/> 
 
     <h4>605-430-1418</h4> 
 
    </div> 
 
</div>