PulQuote nicht neben Text
-
Hallo alle zusammen
bin gerade seit einigen Stunden am Informationen über den TextBlock PullQuote am Suchen. Aber irgendwie schaffe ich das nicht wirklich.
Mein Ziel ist, dass der Text links vom PullQuote Block mit der roten Schrift zu stehen kommt.
Nachdem ich am CSS herum geschraubthabe, ist der Block nach unten gerutscht. Dies obwohl der Block unmittelbar nach dem Titel geschrieben ist.
Was mache ich falsch?
Vielen Dank für Informationen welche den Block neben den Text hoch ziehen…
Gruss Markus<!-- wp:heading --> <h2>Remote Arbeit im HomeOffice</h2> <!-- /wp:heading --> <!-- wp:pullquote {"align":"right","className":"is-style-solid-color"} --> <figure class="wp-block-pullquote alignright is-style-solid-color"><blockquote><p>Access DB Entwickler, VBA Programmierer</p><cite>Siehe <a href="https://markus-winter.ch/ms-office/ms-access/vba-access-programmierung/">VBA Access Programmierung</a></cite></blockquote></figure> <!-- /wp:pullquote --> <!-- wp:paragraph --> <p>Immer mehr Menschen dürfen, oder wollen, oder müssen, im HomeOffice arbeiten. Für die Einen ist das ein Segen, für Andere ist das ein Fluch. Hier beleuchte ich die verschiedenen Aspekte der Arbeit im HomeOffice und was möglicherweise zu beachten ist, jeweils aus den verschiedenen Blickwinkeln des <a href="https://markus-winter.ch/homeoffice/mitarbeiter/">Arbeitnehmers</a> und des <a href="https://markus-winter.ch/homeoffice/arbeitgeber/">Arbeitgebers</a>.</p> <!-- /wp:paragraph -->
Die CSS Datei:
/* 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;} }
Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]
Ansicht von 8 Antworten - 1 bis 8 (von insgesamt 8)
Ansicht von 8 Antworten - 1 bis 8 (von insgesamt 8)
- Das Thema „PulQuote nicht neben Text“ ist für neue Antworten geschlossen.