H2 bigger than H1 blog title

Support
#1

Hello,

why is H2 bigger than H1 blog title? How can I make H2 be smaller than H1?

I’m using X Theme.

thanks!

#2

Hi there,

Thanks for writing in.

Maybe there is a custom CSS, or h1 is displayed as h3 (.h3 class applied to <h1>), or another way around. Would you mind providing your site’s URL that has this issue?

Thanks!

#3

here’s a sample blog post: http://www.learnmuscles.com/blog/2016/12/05/what-is-overpronation-and-what-are-its-causes/

it seems only the blog title is displayed at h3 (which it should. h1 would be too big)

So I guess my question would be: Can I put code in Appearance/Customize/Custom/Edit Global CSS that will make h2 look like h4?

thanks!

#4

Hi There,

I need to clarify this first because it can be confusing for us and other users.

The normal hierarchy of headings in HTML is this: H1 > H2 > H3 > H4 > H5 > H6

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_headings

Same thing on X and PRO, unless you have a Looks Like class applied to your headline as what Rad explains above.

No, posts title are H1. It is smaller than the actual H1 because it has a class entry-title applied on it that reduce its size to 250%, actual H1 is 400%

screenshot

Use the custom CSS below to adjust your posts title font-size. Set that to 171.4% if you want it to be look like H4.

.single-post .entry-title {
    font-size: 250%;
}

Hope it helps,
Cheers!

How to change size etc of header h2, h3, h4, h5
#5

Thanks but Actually, I like H1 size as is. I want to reduce H2 to look like H4.

Thx!

#6

Hi There,

Please try adding the following CSS:

h2, .h2 {
    font-size: 171.4%;
}
#7

thanks! that worked! :slight_smile:

#8

Glad to hear that. :slight_smile: