Hallo

Ich habe aktuell ein (vermutlich) CSS Problem mit einer Seite. Es geht um das Titelbild. In diesem Titelbild befindet sich ein Text. Auf einem grossen Monitor sieht das alles gut aus, aber auf dem schmalen Handybildschirm ist der Text gequetscht. Da ich mich in CSS nicht gut auskenne, hoffe ich, dass Ihr mir helfen könnt 😀

Das Titel-Hintergrundbild wird im header-Tag aufgerufen:

<header class="d-block">
         <div class="Titel">
             T&ouml;sstal spielt
        </div> <br>
       <div class="Untertitel">
             Das Spiele-Wochenende im T&ouml;sstal
        </div> 
    </header>

Und der dazu passende CSS Code ist der folgende:

<style>
    header {
      background-image: url('<?= RESSOURCE_URL ?>/img/game-340574_1280.jpg');
      height: 30vh; 
      background-repeat: no-repeat; 
      background-size: cover;
    }
    .Titel {
      position: absolute;
      top: 8vh;
      left: 50%;
      transform: translate(-50%, -50%);
      font-family: "Lucida Handwriting", "Brush Script MT", Cursive;
      font-size: 6em;
      font-style: oblique;
      font-weight: bold;
      color: white;
    } 
    .Untertitel {
      position: absolute;
      top: 15vh;
      left: 50%;
      transform: translate(-50%, -50%);
      font-family: "Lucida Handwriting", "Brush Script MT", Cursive;
      font-size: 2em;
      font-style: oblique;
      font-weight: bold;
      color: white;
    }
</style>

Wie es dann aussieht: So sieht das auf dem grossen Monitor aus

Ab hier kommts schon zu einem Seitenumbruch, obwohl an den Seiten noch Platz wäre.

So ungefähr sieht es am Handy aus.

Ich dachte eigentlich, dass die Schrift mit kleiner werdendem Bereich auch kleiner wird, oder hängt das nur von der Höhe ab?

Besten Dank falls Ihr eine Lösung parat habt. Die Screenshots haben jeweils Original-Grösse.