CSS to change Font size in blog only works on preview

[ayham]

I tried to change the font size in the blog using global CSS by trying the following codes separately. Both have the effect of increasing the font size of the blog in the preview mode on the main blog page but not inside the actual blog post. Any ideas?

thanks.

.blog p {
font-size:17px;
}

OR
.blog .entry-content.excerpt {
font-size:20px;
}

[mldarshana]

Hi There @ayham

Thanks for writing in! Could you please try placing the following code into your Theme Options > Global CSS area and see if that helps.

.blog .entry-content.excerpt p {
    font-size: 17px !important;
}

Hope that helps.

[ayham]

Hello,

Thanks for your response. The effect is the same:
Blog preview font size changes but not the font inside the actual blog post.

Thanks

[rad]

Hi @ayham,

Please try this,

.blog .entry-content.excerpt p,
.blog .entry-content p {
    font-size: 17px !important;
}

Maybe it’s not an excerpt

Thanks!

[ayham]

Doesn’t work.

I expect this to be straightforward though no? For example, from under typography in cornerstone view.

Thanks!

[Prasant]

Hello @ayham,

Thanks for updating the thread.

If you had used Cornerstone to create the blog posts then you have the option to style the font sizes. I see that you are not using Cornerstone to create blog post, so in your case you will need to make the changes in blog pages using custom CSS.

Code that @Rad shared seems to be working fine that changes font size of excerpts. If you would like to change the font size blog inner post, please add following CSS under X > Theme Options > CSS:

.single-post p {
    font-size: 18px !important;
}

You can change the values as per requirement.

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.

[ayham]

Fantastic. That worked. Thank you very much.

I am assuming that for the same reasons, the other CSS tweaks I am reading about in the forums are not working - Because I didn’t use cornerstone to create the blog post?

Thanks.

[Prasant]

Hello @ayham,

Thanks for updating the thread.

Absolutely, you are right. If the post is not created using Cornerstone then naturally custom CSS applied is not going to work.

Thanks.

[ayham]

Great. A question about this. Would creating posts in cornerstone affect SEO?

[ruenel]

Hello There,

Thanks for updating in! No effect with SEO when you create a post in Cornerstone. Just make sure that you have inserted a manual excerpt or use Yoast SEO plugin for more SEO management and control.

Hope this helps.