Site logo

[Support request] Quote – Left of Paragraph

Home Forums Support [Support request] Quote – Left of Paragraph

Home Forums Support Quote – Left of Paragraph

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #2511695
    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 ?

    #2511846
    David
    Staff
    Customer Support

    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.

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.