Changing blog post text size in CSS affects Navigation Collapsed and Classic Feature List elements

[INcroatia]

Hi there,

We’ve been asked to change the blog post text size (for the p, ol, ul and li tags), but it has also been affecting the font size in the Navigation Collapsed element and Classic Feature List element (maybe even some more elements). We know that changing the global font size is done through Theme Options > Typography, but we want to keep the font across the website the same as it was, we just want to change the above mentioned tags in the blog posts.
We have attempted to use many different approaches in Global CSS and while they all change the font size in the blog post, they have also changed the navigation font size/some other element’s font size which we don’t want.

How can we change the blog post size without affecting anything else on the website?

Thanks!

[rad]

Hi @INcroatia,

Thanks for reaching out.

For that, you’ll have to compose CSS specific to your target element, please check this https://docs.layerswp.com/css-styling-using-the-browser-inspector-customizer/

For example, I inspected your blog post through developer tool and this is what I found,

Then the CSS that you can use is this,

.has-medium-font-size {

 font-size: 20px;

}

Or, with advance use, you can use element hierarchy,

1. .single-post means blog post page

2. .entry-content means the content, so it wouldn’t affect other parts like menu, footer, and so on

3. p then the target element

In short, select the content’s paragraph element within post page and that results to this

.single-post .entry-content p {
font-size: 12px;
}

Sometimes, you’ll have to use !important since there are other CSS that may override it.

.single-post .entry-content p {
font-size: 12px !important;
}

And this is two other variants

.single-post .entry-content p {
font-size: 12px !important;
}
.single-post .entry-content ul li {
font-size: 12px !important;
}

.single-post .entry-content p,
.single-post .entry-content ul li {
font-size: 12px !important;
}

Hope this helps.

Thanks!

[INcroatia]

Thanks @rad, that did help!

[rad]

You’re most welcome!