How to change style of the blog of the WordPress site only

[educainventions]

The blog posts are hard to read because two reasons mainly:

1. The fonts are very big
2. The featured image is shown at the beginning with a huge size

How can I change the style of only the blog posts in general and for that specific issues?

This is a post of my blog: http://www.edinventa.com/blog/existe-un-juguete-divertido-y-educativo/

Thanks

Carlos

[ruenel]

Hello There,

Thanks for writing in!

1.) Please change the font size in the theme options. Go to Pro > Launch > Options > Typography and adjust the font size of your Body and Content > Content Font Size.

2.) To make sure that you feature image will have the same width as your post content, please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

.single-post .entry-featured {
    max-width: 844px;
    margin-left: auto;
    margin-right: auto;
}

And also I noticed that you are using an older version of the theme. Pro 1.2.7 is now available in automatic updates! This release contains fixes for several issues so be sure to check out the changelog (https://theme.co/changelog/). After doing the updates, always remember to clear all caches when updating so that the code from the latest release is always in use. This will help you to avoid any potential errors.

Please let us know how it goes.

[educainventions]

I’m worried that CSS code will also change the whole website (not only the blog posts). Could you confirm that CSS code will change the font size of the blog posts ONLY?

Thanks for your help and patience

Carlos

[paul.r]

Hi Carlos,

To change the font size of your blog posts Only, you can add the code below in Theme Options > Global CSS

.single-post .entry-content {
    font-size: 1.2rem;
}

Change 1.2rem to adjust

Hope that helps.

[educainventions]

Working!!

[rad]

Glad to hear that! Cheers!

[educainventions]

Unfortunately, it does not work well if we change max-width to max-height (because max-height is the important thing here, not width):

.single-post .entry-featured {
max-height: 100px;
margin-left: auto;
margin-right: auto;
}

Why?? How to set max-height instead?

Thanks

Carlos

[christopher]

Hi there,

You can not use the max-height property there. You need to use the max-width to restrain the image for smaller sizes. Whenever you make the width smaller the image will make the height shorter to maintain the aspect ratio.

Thank you.

[educainventions]

I see, but how to restrict the height then? For me it’s important the heigh and not the width in this case.

[rad]

Hi there,

That issue is with the image, it follows certain aspect ratio. No matter what side you change (width, height), may not fit perfectly. Limit the height and the width will follow, the smaller height, the smaller width and of course small image. I recommend uploading an image with your preferred width and height, example, 844x100 image.

Thanks!