Text wird nicht angezeigt, wenn der Bildschirm kleiner wird

Question

Ich versuche, eine responsive Website zu machen und lassen Sie eine h3 erscheinen, wenn ich den Bildschirm kleiner, aber es wird nicht angezeigt. Hier ist mein Code:

@media only screen and (max-width: 1486px) 
{ 

.resptekst 
{ 
    visibility: visible; 
} 

} 

.resptekst 
{ 
    visibility: hidden; 
} 

HTML

<div class="tekst"> 
        <h3 class="resptekst">Contact</h3> 
</div> 

Der Text zeigen muss, wenn ich den Bildschirm zu verkleinern, wenn der Bildschirm groß genug, um Text sollte nicht sichtbar sein.

Answer 1

@media only screen and (max-width: 1486px)

Means "alles Ziel kleiner als 1486px"

So Ihre CSS ändern:

.resptekst 
{ 
    visibility: visible; 
} 

@media only screen and (max-width: 1486px) 
{ 
    .resptekst 
    { 
     visibility: hidden; 
    } 
} 

Answer 2

Änderung CSS Position

css machen oben nach unten Art und Weise

.resptekst 
{ 
    visibility: hidden; 
} 

@media only screen and (max-width: 1486px) 
{ 

.resptekst 
{ 
    visibility: visible; 
} 

} 

Answer 3

Ändern Sie die Reihenfolge der CSS-Regeln. Platzieren Sie die allgemeine Regel vor der @ media-Regel, andernfalls wird sie immer überschrieben, unabhängig von der Bildschirmgröße.

In CSS immer von generisch zu spezifisch angeben, sonst werden die generischen Regeln die spezifischen überschreiben.

/*Generic rule*/ 
 
    .resptekst 
 
    { 
 
     visibility: hidden; 
 
    } 
 

 
    /*small screen specific rule*/ 
 
    @media only screen and (max-width: 1486px) 
 
    { 
 
    
 
     .resptekst 
 
     { 
 
      visibility: visible; 
 
     } 
 
    
 
    }

 
 
    <div class="tekst"> 
 
         <h3 class="resptekst">Contact</h3> 
 
    </div>

Wenn Sie eine ausreichend große Display (Full-HD zum Beispiel) haben, können Sie diese Schnipsel testen auf der Run code snippet Schaltfläche anklicken und dann auf der Full page Schaltfläche klicken.

Answer 4

Medien Abfrage zuletzt sein sollte, Ihre CSS ohne Medien Abfrage zuerst kommt

.resptekst 
 
{ 
 
    visibility: hidden; 
 
} 
 

 

 

 
@media only screen and (max-width: 1486px) 
 
{ 
 

 
.resptekst 
 
{ 
 
    visibility: visible; 
 
} 
 

 
} 
 

 
    
 

 

<div class="tekst"> 
 
        <h3 class="resptekst">Contact</h3> 
 
</div>