Changing text size in quote block

[kristincali]

I am using a quote block on my homepage (www.kristinbytheocean.com) and the text is HUGE. I don’t see anywhere to change that. Is there code I can use?

 

 

[Andy]

Yes, using ‘Additional CSS’ in the customizer to change the font size of the quote blocks.

The default font size is 1.6 x the page font size, so to make it same size as the page font size, add this custom CSS:

blockquote {
    font-size: 1em;
}

1em will make it same size as the normal page font size, 1.25em will be 1.25 x the page font size etc.

[kristincali]

Thank you. That did change the font size but that must not have been my problem.

When viewing on a mobile device only 1 or 2 words are on each line. As if the section is too narrow. It looks like the actual quotation symbols are taking up too much space. Is there any workaround for this?

 

Hope that makes sense.

[Andy]

Please try this Additional CSS to make it a better fit on mobile.

@media (max-width: 768px) {
  blockquote {
    padding-left: 30px;
    padding-right: 30px;
  }

  blockquote:before,
  blockquote:after {
    width: 20px;
    font-size: 1em;
  }
}

Thanks for bringing this to our attention. I’ll see if we can update the blockquote styling in the next theme update.

[Author]

Posts