[ryanschaefer41Participant]

Hi! I’m trying to change the font weight of the blockquote element. How exactly would I do that? It looks like only the 400 weight has been imported. When I change it in framework—>css—>dist—>site—>stacks—>ethos.css it doesn’t reflect it on the page. Thanks in advance for the help!

[RahulModerator]

Hi There,

Thanks for writing in!

Please refer to the thread https://community.theme.co/forums/topic/font-adjustment-for-block-quotes/ and implement the CSS code.

Feel free to contact us again if you need our assistance.

Cheers!

[ryanschaefer41Participant]

I’m trying to get large quotation marks behind a blockquote. I used this code:

blockquote.x-blockquote:before {
    content: url("https://kglobal-dev.com/morgan6/wp-content/uploads/2017/03/quotation-marks-2.png")
}

to add it inline but I want it to render behind the text and slightly to the right, creating a 3D effect. I’ve attached a screenshot of what it looks like now and an example of the positioning (316.jpg) I’d ideally like.

Thanks for the help!

[ChristopherModerator]

Hi there,

Please do not change parent theme stylesheets. You can add or overwrite CSS by adding it under Customize -> CSS.

I recommend you to set background image to achieve the layout in attachment, to do so please add following code in Customize -> Custom -> Global CSS :

blockquote.x-blockquote.center-text {
    background-image: url(https://kglobal-dev.com/morgan6/wp-content/uploads/2017/03/quotation-marks-2.png);
    background-repeat: no-repeat;
    background-position: 17% 37%;
}

Hope it helps.

[ryanschaefer41Participant]

Hi – looks like that’s still giving me what I had before. How would I get the quotation marks behind the text and moved slightly to the left? And scalable for mobile. Thanks!

[ryanschaefer41Participant]

Sorry, looks like it’s working great now! But I’m trying to add a media query to keep the font size down on mobile and I can’t seem to target the text appropriately. It might be the section where I’m trying to ad it (wasn’t working in Customize -> Custom -> Global CSS). What would I put to take it down from 36px to 20px with a screen width of 780px? Thanks!

[FriechModerator]

Hi There,

You can write it something like this:

@media (max-width: 780px) {
	blockquote.x-blockquote {
		font-size: 20px;
	}
}

Thanks.

[Author]

Posts