Site logo

Archived topic

Quote - Left of Paragraph

1 reply · Started by Brandi on January 27, 2023

Viewing posts 1–2 of 2

Hi there,

for all blockquotes you can add this CSS:

.wp-block-quote {
    --width: 400px;
    border-left: 0;
    padding-left: 0;
    border-top: 3px solid #000;
    border-bottom: 3px solid #000;
}
.wp-block-quote p {
    font-size: 32px;
    line-height: 1;
    font-weight: 900;
    margin-bottom: 0.25em;
}

@media(min-width: 1200px) {
    .wp-block-quote {
        float: left;
        max-width: var(--width);
        margin-right: 20px;
        margin-top: 10px;
        margin-bottom: 0;
        margin-left: calc( ( var(--width) / 2 ) * -1 )
    }
}

Couple of things to note:
this line sets the width of left floated quote: --width: 400px;
and this line: @media(min-width: 1200px) { is where you set the size of screen that the quote will be floated.

Those will need tweaking to suit your ste.
If you want to try it , and if it needs tweaking let me know with a link to your site.

This archived topic is closed to new replies.