Ethos Blog/Carousel Title Size

Support
#1

Hey,

I’ve been trying for a while to figure out how to change the size for all the h2 and h3 titles on my blog, but it doesn’t seem to work without either applying the CSS for the entire site, or applying it to the blog + carousel. I don’t want the carousel font size to change with the blog post change. Is there no workaround here?

If I apply:

body h2 {
font-size: 130% !important;
}

The entire site will have the same h2 site – which I don’t want.

If I apply:

.single-post .h2, .single-post h2 {
font-size: 130% !important;
}

The blog title size will change, but so will the ethos carousel titles and that makes them waaaaay too big for the carousel. I then tried to apply:

.h-entry-cover {
font-size: 14px !important;
}

But that won’t override the previous code. Please help!

Thanks!

Ann

#2

Hey,

We need to apply a custom CSS for only the carousel post, but to do it, you`ll need to share with us your website link in a secure note.

#3

Got it!

Thanks!

#4

Hi There,

Thank you for the URL, please use this custom CSS instead.

/*Index blog page title font-size*/
.blog .entry-title a {
	font-size: 200%; 
}

Feel free to adjust the 200% value.

Hope it helps,
Cheers!

#5

Hmmm nothing happened with that… I tried this too:

.blog .entry-title a {
font-size: 200% !important;
}

I removed all other CSS but still nothing.

Thanks,
Ann

#6

Hi Ann,

I’ve tested that code, it should work (https://prnt.sc/gr36qq)

Where did you place it? I am not seeing it anywhere on your custom CSS.

Clear your browser’s cache before you preview the page.

Thanks,

#7

Ohhh that’s not what I’m having issues with… it’s inside the post. The default h2 and h3 are massive and when I apply CSS to change it (I only want this to change to take effect on the blog), it will also change the carousel title.

Thanks!
Ann

#8

Hi there,

Please try this:

.single-post .h-entry-cover span {
    font-size: 14px;
}

Hope this helps.

#9

That worked!

It’s keeping that padding at top and bottom though, I tried changing padding, margin, and line height but it didn’t help. How could I do that?

Thanks!

Ann

#10

Hello There,

Thanks for updating in! Do you want to minimize the space around?

You can make use of this code instead:

.single-post .h-entry-cover {
    padding: 20px;
    top: calc(100% - 2em);
}

Feel free to change the paddings if needed.