Change font size and responsiveness of blog post title

Support
#1

Hi there,

I’m having trouble reducing the font size of my blog post titles. I have played around with the font sizes in the typography settings, but the only way I’ve managed to make the title smaller also makes the text of the post too small!

Can you recommend some font settings, or an alternative approach?

Thanks,

Callum.

#2

Hello There,

Thanks for writing in! The fonts in the Typography settings will be applied globally and in all the screen sizes. The blog tiles is controlled by the headings in Typography > Headings. Please also make sure that you have added the settings for the root font size and the font sizes for the small, medium and large screens. Please go to X > launch > options > Typography > Root font size mode.

Hope this helps.

#3

Thanks for getting back to me.

The settings in Typography --> Headings does not allow change of font size, only font weight and heading letter spacing.

I’ve tried both suggestions but still no difference.

Callum.

#4

Hi again,

You can try adding the following code in your Customizer:

.blog .entry-title, .single-post .entry-title {
    font-size: 20px !important;
}

Adjust the font size as per your need. Let us know how this goes!

#5

Thank you Nabeel, that worked well.

Is there a way to change the font size when the title appears in a grid outside of the blog page?

On my homepage, for example… trainyouradopteddog.com

#6

Hi again,

You can make use of the following code:

.thrv_post_grid .tve_post .tve-post-grid-title {
    font-size: 25px !important;
}

Let us know how this goes!

#7

Thanks Nabeel. That worked but the grid box didn’t shrink with the text…how do I get around that?

#8

Hello There,

Thanks for updating in! The css code given is only to reduce the font size of the text and not to make your grid smaller. Your grid item has 33% width. I assume that this grid is a 3 column grid. please adjust this to 4 or 5 columns to make the grid smaller. Regretfully we cannot assist further because this grid is coming from Thrive Visual Editor which we do not have nay knowledge how the elements works in the editor.

Thank you for your understanding.