Zur Navigation

Schrift verkleinern

1 MarkusWi

Hallo alle zusammen

Es geht um die WordPress Seite https://markus-winter.ch/homeoffice/ auf welcher es zwei Blöcke mit zu grosser, roter Schrift hat. Die Schrift möchte ich verkleinern.

Eigentlich dachte ich es wäre im CSS .wp-block-pullquote blockquote oder im .wp-block-pullquote p .

Und ich dachte, die Schriftgrösse würde ich mit
font-size: 12px;
festlegen.

Schriftfarbe, Rahmenfarbe habe ich geschafft. Auch die untere Zeile "Siehe" habe ich geschafft. Nur der rote Text, den schaffe ich nicht, zu verkleinern.
Was mache ich falsch?

Viele liebe Grüsse
Markus


Das von mir definierte CSS:

/* PullQuote */
/* --------- */
/* Anpassung des Blockqoute Elementes für Pullquotes */ 
 .wp-block-pullquote blockquote {
      color: #111;
      border: solid; /*ok*/
      border-radius: 10px 10px 10px 10px; /*ok*/
      border-width: 1px;
      margin-top: calc(4 * 1rem);
      margin-bottom: calc(4.33 * 1rem);
      margin-left: 0;
 }
 /* Absätze im Rahmen des Pullquotes */ 
 .wp-block-pullquote p {
      font-size: 13px;		/* warum ist das nicht die Schriftgrösse ??? */
      font-style: normal;
      line-height: 1; /*ok, reagiert*/
      font-family: "Garamond", "Times New Roman", serif; /* Hier lassen sich natürlich auch andere Schriftarten auflisten */
      margin-bottom: 0.5em;
      margin-top: 0.5em;
 }
 /* Quellenangabe des Pullquotes */  
 .wp-block-pullquote cite {
      display: inline-block;
      font-family: "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;  /* Ebenso hier Platz für andere Schriftarten */ 
      line-height: 1.6;
      text-transform: none;
      font-style:normal;
      font-size: 13px; /*ok Untere Zeile, reagiert.*/
  }
 /* Style Default */
 /* Style Default alignfull und alignwide */
 .wp-block-pullquote.alignwide.is-style-default, 
 .wp-block-pullquote.alignfull.is-style-default {
     border-top: 2px solid #632e9b;  /* Farbwert anpassen! */ 
     border-bottom: 2px solid #632e9b;  /* Farbwert anpassen! */ 
     margin-top: calc(4 * 1rem);
     margin-bottom: calc(4.33 * 1rem);
     padding: 0 1em;
 }
 /* Farbfüllende Pullquotes */  
 /* Farbfüllend: Pullquotes alignfull und alignwide */  
 .wp-block-pullquote.alignfull.is-style-solid-color, 
 .wp-block-pullquote.alignwide.is-style-solid-color {
      background-color:#632e9b; /* Farbwert anpassen! */
      padding-top: calc(2 * 1rem); 
      padding-bottom: calc(2 * 1rem); 
      margin-top: calc(4 * 1rem);
      margin-bottom: calc(4.33 * 1rem);
      }
 /* Farbfüllend: Blockquote-Element des Pullquotes 
alignfull und alignwide */   
 .wp-block-pullquote.alignfull.is-style-solid-color blockquote, 
 .wp-block-pullquote.alignwide.is-style-solid-color blockquote {
      max-width: 100%;
      margin-left: 1rem;  
      margin-right: 1rem;      
 }
 /* Farbfüllend: Absätze im Rahmen des Pullquotes */ 
 .wp-block-pullquote.is-style-solid-color p {
     color:red /* ok Farbwert ggf. anpassen */
 }
 /* Farbfüllend: Quelle des Pullquotes alignfull und alignwide */ 
 .wp-block-pullquote.alignfull.is-style-solid-color cite, 
 .wp-block-pullquote.alignwide.is-style-solid-color cite 
 {color:#fff;  /* Farbwert ggf. anpassen */ 
}
 /* Media Queries für die Pullquotes */
 /* Tablets quer und Desktop */
 @media screen and (min-width: 769px) {
 .wp-block-pullquote.alignfull.is-style-solid-color blockquote { 
      max-width: 760px;  /* Breite ggf. anpassen */ 
      margin-left:auto;
      margin-right:auto;
 }
 .wp-block-pullquote.is-style-solid-color blockquote p {
     font-size: 2.25em;
     margin-bottom: 1em;
 }
 }
 /* Mobiles bis zu Tablet hoch */
 @media screen and (max-width: 768px) {
 .wp-block-pullquote.is-style-solid-color blockquote p {
     font-size: 32px;
 }
 .wp-block-pullquote p {
     font-size: 32px;
     margin-bottom:1em;}
 }

01.01.2021 14:33

2 Jörg Kruse

Diese beiden Blöcke musst du wohl bearbeiten:

 .wp-block-pullquote.is-style-solid-color blockquote p {
     font-size: 2.25em;
     margin-bottom: 1em;
 }

 .wp-block-pullquote.is-style-solid-color blockquote p {
     font-size: 32px;
 }

Durch die zusätzliche Klasse "is-style-solid-color" sind die Selektoren spezifischer und haben dadurch Vorrang

01.01.2021 15:38

3 MarkusWi

Super vielen lieben Dank, hab's geschafft... danke Dir.

01.01.2021 17:23

Beitrag schreiben (als Gast)

Die Antwort wird nach der Überprüfung durch einen Moderator freigeschaltet.





[BBCode-Hilfe]