Dawn Theme - Änderung der Schriftgröße im Bild Banner

[BensGinger]

Hallo,

ich will gern die Schriftgröße im Bildbanner des Dawn Themes ändern. Leider gibt es dort keinen Shopify Editor. Gibt es irgendeine Möglichkeit hier im Code etwas anzupassen?

Danke für eine Rückmeldung.

[Finer]

@BensGinger ja, das geht per CSS. Hast du Kenntnisse in diesem Bereich?

[BensGinger]

@Finer Ein wenig habe ich Erfahrung bzw. mit einer kurzen Anleitung bekomme ich das sicherlich selber im Code eingebaut. Danke schon einmal für die Hilfe.

[Finer]

@BensGinger dann musst du im Code-Editor in der base.css Datei die Werte für h0 & h1 anpassen. Allerdings kann sich das auch auf andere Elemente übertragen, wo die Schrift ebenfalls auf die Werte zugreifen. Da man bei Dawn im Bild-Banner zwischen zwei Größen wählen kann, musst du einer der beiden Größen anpassen.

.h0 {
  font-size: calc(var(--font-heading-scale) * 4rem);<-- Mobile Ansicht
}

@media only screen and (min-width: 750px) {
  .h0 {
    font-size: calc(var(--font-heading-scale) * 5.2rem);<-- Desktop Ansicht
  }
}

h1,
.h1 {
  font-size: calc(var(--font-heading-scale) * 3rem);<-- Mobile Ansicht
}

@media only screen and (min-width: 750px) {
  h1,
  .h1 {
    font-size: calc(var(--font-heading-scale) * 4rem);<-- Desktop Ansicht
  }
}

Wenn die Schrift kleiner werden soll, könntest du auch in der Section das Class-Attribut von .h1 auf .h2 oder .h3 wechseln. Wenn die Schrift größer werden soll, kannst du entweder eine neue Class mit der Wunschgröße definieren oder du verwendest das "style"-Attribut für den entsprechenden Container:

<h2 class="banner__heading h0" style="font-size:6em;">
    <span>Talk about your brand</span>
</h2>

[BensGinger · Accepted solution]

@Finer Danke für die ausführliche Beschreibung. Ich nehme es auf und versuche es umzusetzen. 🙂