[Support request] Quote – Left of Paragraph

[Brandi]

I’m sure I am just overlooking a setting but what is the best way to create a quote offset to the left of a paragraph similar to https://www.josephprince.org/about/the-ministry ?

[David]

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.

[Author]

Posts