Block Quotes Won't ReSize Properly in Executive Pro

[jrotem]

I have a problem with block quotes in Executive Pro. I changed something while tweaking but after I changed it back to the original (except for color), even though the font size: is 30px, it shows on the page as much smaller on this page: http://new.darrylepollack.com/order/
How can I get the large quotes back without messing up the spacing?

blockquote,
blockquote::before {
color: #999;
}

blockquote {
margin: 40px 40px 24px 20px;
margin: 4rem 4rem 2.4rem;
}

blockquote::before {
color: #2190c3;
content: “\201C”;
display: block;
font-size: 30px;
height: 0;
left: -20px;
position: relative;
top: -10px
}

Jean

---

“It’s always something.” — Rosanne Roseannadanna

http://new.darrylepollack.com/order/

[Graham]

Check the fonts that are being used by the stylesheet against those that you have enqueued

---

My JustGiving page: https://www.justgiving.com/helping-graham-give

[jrotem]

Sorry... "Enqueued" -- do you mean the google fonts I've added ?
It did start out looking ok; when I changed things and then reverted did that change the font that is called up?

---

“It’s always something.” — Rosanne Roseannadanna

[jrotem]

Hmmm... can't edit my post. Anyway, yes, of course that's what you meant. So I made sure the original font was there, and it should apply, as I've been using it for the body text (unless generic sans serif is being applied?) At any rate, the quotes haven't changed

---

“It’s always something.” — Rosanne Roseannadanna

[eamonmoriarty]

the 30px font-size you have specified refers to blockquote::before, not the blockquote itself.

You need to have

blockquote {
font-size: 30px;
}

in your stylesheet

---

Eamon Moriarty
EM Dzine

[jrotem]

Yes, it is the quotation mark itself that is not responding. I don't need the text font to be bigger.

I want the nice big quotation marks back that originally looked something like this. 🙂

---

“It’s always something.” — Rosanne Roseannadanna

[eamonmoriarty]

You have this at line 223 of your style sheet:

blockquote::before {
    color: #2190c3;
    content: "“";
    display: block;
    font-size: 30px;
    height: 0;
    left: -20px;
    position: relative;
    top: -10px;
}

Have you tried increasing font-size: 30px; to a bigger size?
If that doesn't work it probably means that you have something else later in your style sheet which 'trumps' that.

Try putting
`blockquote::before {
font-size: 50px !important;
}
(or whatever size you want) at the end of your style sheet

---

Eamon Moriarty
EM Dzine

[jrotem]

Thank you. I did; it just messed up the spacing. I do now think, however, that although I've added Open Sans to be the font for this element, I must have done something (which I can't find) and that it's defaulting to generic sans serif, and I wonder if that might affect it.

---

“It’s always something.” — Rosanne Roseannadanna

[Erik D. Slater]

Oh this one is subtle ... a real doozy ... and you may kick yourself for it 🙂

It IS defaulting to sans-serif ... because there is no such font as Open-Sans.

The Google font is called Open Sans.

Can you spot the difference?

---

Erik D. Slater: Digital Platform Consultant • LinkedIn

[jrotem]

Oh, I've been kicking myself since I started learning Genesis! :))
In functions.php and in stylesheet isn't it supposed to be written Open+Sans? I thought I had changed it properly but maybe not everywhere. Checking...

---

“It’s always something.” — Rosanne Roseannadanna

[jrotem]

Oops -- + for functions.php but not stylesheet. Changed all to Open Sans.
Alas, marks are still small. And now straight, not curly.

---

“It’s always something.” — Rosanne Roseannadanna

[Erik D. Slater]

Yeah ... it's called Open Sans ... but for URL encoding purposes, the plus sign is required to signify the space character.

You appear to have applied the two changes accordingly 🙂

---

Erik D. Slater: Digital Platform Consultant • LinkedIn

[jrotem]

Yes but without the fix I'm looking for! 😀
Any other ideas? Thanks so much!

---

“It’s always something.” — Rosanne Roseannadanna

[Erik D. Slater]

The original blockquote can be found on this Executive Pro demo page. But this doesn't seem to be what you are looking for. So, can you please point us to the original about which you speak? A link ... or a screenshot ...

In an earlier posting, you sort of implied that you were looking for this image here. It doesn't fit with everything else that you said ... but is this what you are looking for?

---

Erik D. Slater: Digital Platform Consultant • LinkedIn

[jrotem]

I thought they were originally curly quotes but I must have been wrong (or the first time I saw it it was defaulting to some serif font instead of Open Sans, since obviously Open Sans was not being applied.) I think I'll just resize them, leave them as Open Sans "smart" quotes and move on for now. I really appreciate the help. At least i have the font working correctly.

---

“It’s always something.” — Rosanne Roseannadanna

[Erik D. Slater]

Ahhhhhhh ... curly quotes ... so that's your requirement 🙂 That would be a game-changer ... or in this case, a game-definer 🙂

Since your site already loads Dashicons, there are a couple of possible solutions for you here.

To start with, head back to your blockquote::before definition.

Firstly, try adding font-family: dashicons;. This will give you a different type of quote. If you like that one, great. But I'm thinking you won't 🙂 So ...

Secondly, change the value of content to "\f205". You might like that one more ... but it's too big, right? In that case, change your font-size back to 30px (the original value).

Now then ... how does that look for you?

---

Erik D. Slater: Digital Platform Consultant • LinkedIn

[jrotem]

It now all makes sense! Thanks so much. I hadn't been able to figure out what "/201c" meant until I saw the "/f205" fontawesome code. As you predicted, I stuck with straight quotes in the end although I did go back and forth, and if my client want curly quotes I can do that now. 🙂

Thanks again! 🙂

---

“It’s always something.” — Rosanne Roseannadanna

[Erik D. Slater]

WOOHOO 🙂

---

Erik D. Slater: Digital Platform Consultant • LinkedIn

[Author]

Posts