Hallo, ich habe gerade vor ein paar Tagen mit der Webentwicklung begonnen. Ich möchte, dass der Header meiner Webseite reagiert, damit Breite, Höhe und Schriftgröße flexibel sind.

<header class="text-white">
<div class="jumbotron bgimg text-white">
  <h1 class="display-4">    
    <i class="fa fas fa-star"></i>
    Hello, World!<i class="fa fas fa-star fa-1x"></i></h1>
  <p class="lead">This is my webpage</p>
  <hr class="my-4">
  <p class="lead">Web page details.</p>
  <a class="btn btn-primary" href="./file.zip" download="" role="button">Download!</a>
</div>

Also habe ich den Code so geschrieben, dass meine Briefgröße auf einem kleinen mobilen Gerät klein gedruckt wird. Mein Problem ist, dass es gleich bleibt und mein Hintergrundbild zufällig zugeschnitten wird. Liegt es daran, dass ich display-4 auf h1 gesetzt habe?

@media (max-width: 400px) {
  #headerh1 {
    width: 100%;
    height: 10%;
    font-size: 2em;
  }
}

Vielen Dank für immer.

0
loone96 19 Feb. 2020 im 16:43

3 Antworten

Beste Antwort

Problem ist mit Selektor einfache Verwendung

h1{
    width: 100%;
    height: 10%;
    font-size: 2em;
}

Oder

h1.display-4{
        width: 100%;
        height: 10%;
        font-size: 2em;
    }

Oder genauer

header h1.display-4{
        width: 100%;
        height: 10%;
        font-size: 2em;
    } 

Lesen Sie mehr über CSS-Selektoren

0
Awais 19 Feb. 2020 im 13:54

Der Selektor #headerh1 {...} sollte header h1 {...} sein (keine ID außer Tag, Leerzeichen zwischen header und h1).

Wenn das Element dadurch nicht ausgewählt wird, enthält Ihr Code eine weitere spezifischere CSS-Regel. Sie müssen daher die CSS-Spezifität erhöhen, z. B. durch Schreiben (beachten Sie die Leerzeichen und "Nicht-Leerzeichen" ...):

header.text-white div.jumbotron.bgimg.text-white h1.display-4 { ... }
1
Johannes 19 Feb. 2020 im 13:54

Oder versuchen Sie vielleicht, ein id zum Header hinzuzufügen :)

<header id="headerh1" class="text-white">
0
THess 19 Feb. 2020 im 14:25