Character goes missing?

Support
#1

Hi there!

I have created testimonials on my landing page, using this code:
blockquote {
/*
background: #f9f9f9;
*/
border-left: 10px solid #ccc;
margin: 1.5em 10px;
padding: 0.5em 10px;
quotes: “\201C”"\201D""\2018""\2019";
border-color: white;
font-size: 100%;
font-weight: normal;
}
blockquote:before {
color: #ccc;
content: open-quote;
font-size: 8em;
font-family: lat;
line-height: 0.1em;
margin-right: 0.1em;
vertical-align: -0.4em;
}
blockquote p {
display: inline;
line-height: 1.5em;
}

.testimonial_headline {
text-transform: uppercase;
font-weight: 900;
margin-bottom: 15px;
}

Tha all works fine. However, further down on the same page, I have more testimonials, which for now (as placeholders) are exact copies of the first one.

And I am really pulling my hair out over this… but on the other ones, one of the quotation marks goes missing? It is the EXACT same code / CSS selectors?

Many thanks for your help!

#2

Hi there,

Thanks for writing in.

Would you mind double checking the URL you have provided? I tried checking it but it seems to be inaccessible at the moment.

#3

Sorry, i had a server issue. Completely forgot about this ticket also.

Please try again, it works fine now.

#4

Hi there,

I have checked your page and the quotes seem to be displaying correctly. See screenshot below.

Kindly try to clear your cache.

#5

Hi Jade,

The character in the first section has always been ok.

The problem only appears further down the page! So it is still occuring.

Thanks.

#6

Hey there,

This is the normal behavior of the quotes. See https://css-tricks.com/almanac/properties/q/quotes/

You might want to use FontAwesome instead. In the sample CSS below (add this to your Global CSS), I used the double quote font icon from FontAwesome library which comes from X.

blockquote:before {
    content: "\f10d";
    font-size: 4em;
    font-family: FontAwesome;
    line-height: 1.1em;
}

It will look like this.

Please note that the given code serves only as a guide and we do not have support any issues arising from the use of the code or any enhancement. For that, you should hire a third party developer.

Thanks.