Überschriften responsive gestalten

HarleyQuinn

Hi zusammen

Ich versuche schon seit Stunden folgenden Fall zu lösen:

Nehmen wir das als Beispiel:

HTML

<h2>Hello World <span style="font-family: 'Courier New', Courier;">dies ist ein</span> Test</h2>

Über CSS habe ich aktuell folgendes realisiert:

Code

@media only screen and (max-width: 768px) {
    h1 {
        font-size: 36px;
        line-height: 43px;
    }
    h2 {
        font-size: 29px;
        line-height: 35px;
    }
}

Was ich möchte: Dass in diesem Beispiel die Schriftart "Courier New" separat angesprochen und per CSS angepasst werden kann. Ich möchte dies global ändern und nicht inline.

Hat mir hier jemand einen Anhaltspunkt? Ich verzweifle langsam.

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

b3317133

Code

<h2>Hello World <span>dies ist ein</span> Test</h2>

Code

h2 span {
    font-family: 'Courier New', Courier;
}

Siehe auch Suchmaschine z.B. CSS Selektoren (developers.mozilla.org)

HarleyQuinn

Ich habe mich zu ungenau ausgedrückt.

Wenn im WordPress-Editor z.B. die drei Worte "dies ist ein" markiert werden und die Schriftart geändert wird (nur von diesen drei Worten. Im Beispiel wäre das Courier New)), möchte ich über CSS gerne steuern können, dass die Schriftgröße sich für Geräte unterhalb von
768 Pixel verkleinert. Das bekomme ich nicht hin.

Auf der WordPress-Seite kommt dieser Fall immer wieder vor. Also Absätze mit zwei oder drei Wörtern in einer anderen Schriftart. Diese jedes Mal per inline zu bearbeiten wäre enormer Mehraufand.

b3317133

Code

<h2>Hello World <span style="font-family: 'Courier New', Courier;">dies ist ein</span> Test</h2>

Code

@media only screen and (max-width: 768px) {
  h2 span[style*="Courier"] {
      font-size: 10px;
    }
}

Das sind CSS Grundlagen zum Thema Selektoren, mit WordPress hat es nichts zu tun, daher bin ich jetzt raus, viel Erfolg.

HarleyQuinn

Hey vielen herzlichen Dank! Das war der ausschlaggebende Tipp. Ab hier finde ich weiter.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Überschriften responsive gestalten

Jetzt mitmachen!