1
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:
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;}
}