Using quotation marks with a blockquote

[NLeVasseur]

Hi There,
I am trying to add a quotation mark to a blockquote as a design element and need help with the CSS. Maybe I should be doing this in a text element instead of a blockquote element. Please let me know if that would be a better way to go.

More info to follow,
Nancy

Below is the CSS I am using:

.x-blockquote.lfs-blockquote {
margin-top: 0 !important;
padding: 40px 30px 10px 20px !important;
font-size: 138% !important;
line-height: 175% !important;
font-style: italic !important;
text-indent: 50px !important;
z-index: 1000 !important;
margin-bottom: 1px !important;
}
.x-blockquote.lfs-blockquote :before {
content: ‘\201C’;
font-family: “serif”, serif !important;
font-style: normal;
font-weight: 600;
position: absolute;
padding-right: 25px !important;
font-size: 175px;
top: 55px;
left: -35px;
color: rgba(19, 77, 104,.4) !important;
}
cite.x-cite {
font-weight: 600 !important;
font-size: 85% !important;
display: flex !important;
}

The line below is a horizontal rule.

Anyway, I would like the text to wrap around the quotation mark. I’ve tried indenting it more, but everything indents. Can you please tell me what I am doing wrong?

Thanks so much!
Nancy

[paul.r]

Hi Nancy,

You can adjust the following values to let the text wrap around the quotation mark.

You can try text-indent:80px !important; and left:-40px;

Hope this helps

[NLeVasseur]

Hi Paul,
Thanks for your reply. I’ve tried changing those numbers but it doesn’t seem to work. I’ll give it another go and see what happens.

Thanks again,
Nancy

[Prasant]

Sure, let us know how it goes.

[NLeVasseur]

Hi Prasant,
I was able to make it work by adjusting those values. But in the end, I’ll probably use an image as they really get wonky when resizing for mobile.

Thanks for your help!

Best,
Nancy

[ruenel]

Hey Nancy,

We are just glad that you have figured it out a way to correct the said issue.
We appreciate for letting us know!

Best Regards.