Größe der Textzeile auf Handy ändern (div)

Question

Kann jemand Text für das mobile Gerät skalieren? Mein CSS funktioniert nicht.

<div class="wpb_column wpb_content_element how-it><div class="wpb_wrapper"> 
<h1 class="p1" style="text-align: center;"><span style="font-size: 45px;"> 
<span style="color: #000000;">SLIK FUNGERER ABONNEMENTET</span></span></h1></div></div> 

CSS:

@media (max-width: 360px) { 
.how-it h1 {font-size: 16px; !important;} 
} 

Answer 1

Zunächst einmal lesen https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity zu lernen, wie man CSS nach den vorgegebenen Regeln angewendet wird.

Zum spezifischen Problem können Sie einen Stil, der direkt auf ein Element angewendet wird, nicht überschreiben, indem Sie ein untergeordnetes Element ändern. Sie müssen dasselbe Element als Ziel festlegen.

So zielen die span Element .how-it h1 span{font-size: 16px; !important;}

Aber je mehr richtige Weg wäre, die Stile vollständig aus dem HTML zu entfernen und sowohl mobile und Desktop-Styling durch CSS-Regeln zu tun. Auf diese Weise können Sie vermeiden, !important zu verwenden, was nur dann zu weiteren Problemen führen wird, wenn Sie es gemäß anderen Szenarien neu gestalten möchten.