Fehler Zeta 17.2. Schrift auf dem Smartphone

Du hast fix die Schriftgröße 30px eingestellt. Das ist für responsive (Handy) enorm groß. Ich mache das immer über flexible Größen via CSS und HTML
Beispiel für deinen Hero

<div class="zpColumnItem">
<style>
/* 1. Hauptcontainer: Sorgt dafür, dass nichts über den Bildschirm hinausragt */
.figuren-start {
padding: 15px;
box-sizing: border-box;
width: 100%;
overflow-x: hidden;
}

/* 2. Der Titel: Passt sich fließend an (mind. 20px, ideal 5vw, max. 30px) */
.figuren-start h1 {
text-align: center;
font-size: clamp(20px, 5vw, 30px);
line-height: 1.3;
margin: 0 0 20px 0;
}

/* 3. Die Textabsätze: Fließende Schriftgröße für optimale Lesbarkeit auf allen Geräten */
.figuren-start p {
text-align: justify;
font-size: clamp(14px, 3.2vw, 22px);
line-height: 1.5;
margin-bottom: 15px;
}
</style>

<div id="a112" data-article-id="112" data-zpleid="112" class="articlearea zpwText figuren-start">
<h1>
<strong>Herzlich Willkommen auf Figuren-Katalog.de</strong>
</h1>
   
<p>
Figuren-Katalog bietet eine Übersicht der Figuren und Spielzeuge aus dem Überraschungsei. Seit 2002 bietet Unser-Sammler-Team eine umfangreiche Anlaufstelle für Ü-Ei Fans auf der ganzen Welt, mit Figuren-Katalog.de wird nun ein neues Kapitel aufgeschlagen, in dem Figuren und Spielzeuge, je nach Saison sortiert, vorgestellt werden.
</p>
   
<p>
<strong>Unser Katalog ist ab Saison-Start verfügbar, danach werden nach und nach neue und alte Serien aus dem Überraschungsei eingearbeitet. Besuchen Sie uns daher regelmäßig!</strong>
</p>
</div>
</div>


Kurzbeschreibung der CSS-Befehle:

1. .figuren-start (Der Container):
   • box-sizing: border-box; verhindert, dass Innenabstände die Box breiter machen als den Bildschirm.
   • overflow-x: hidden; unterbindet zuverlässig jegliches horizontales Scrollen auf dem Smartphone.
2. font-size: clamp(...) (Der Trick für fließende Schrift):
   • Anstelle von starren Pixeln (30px) wird hier clamp(Minimum, Ideal, Maximum) verwendet.
   • Auf einem großen Desktop-Bildschirm greift das Maximum (30px bzw. 22px). Auf dem Smartphone schrumpft die Schrift automatisch und fließend mit, unterschreitet aber nie das definierte Minimum, damit es lesbar bleibt.
3. line-height & margin:
   • line-height sorgt für einen angenehmen Zeilenabstand (wichtig bei kleineren Smartphone-Bildschirmen).
   • margin sorgt für saubere Abstände unter den Absätzen
     
     Gruß
     Armin

Hallo! Da habe ich dich komplett missverstanden – ich dachte, du meintest die große Willkommens-Überschrift ('Herzlich Willkommen auf Figuren-Katalog.de').

Dir geht es um den "Webnamen" und Webslogan".

Du kannst mal folgenden CSS-Code eingeben (globalen CSS-Bereich), damit sich Name und Slogan automatisch anpassen:

/* Responsive Anpassung für Webname und Slogan im Header */
#webtext {
max-width: 100% !important;
box-sizing: border-box !important;
word-break: break-word !important;
}

#webname a {
font-size: clamp(16px, 4.5vw, 24px) !important;
line-height: 1.2 !important;
display: inline-block !important;
}

#slogan {
font-size: clamp(12px, 3vw, 16px) !important;
line-height: 1.3 !important;
}

Der CSS-Code sorgt dafür, dass sich der Webname und der Slogan im Header auf Smartphones automatisch und fließend verkleinern (über clamp()), anstatt über den Bildschirm hinauszuragen. Zudem bricht er lange Wörter bei Platzmangel sauber um (word-break).

Gruß

Armin (aws)