Adjusting Sizes of Headers

[bentkieran]

Hi, I am using the ethoz theme. I noticed that the H1 of my blog post title is different from the H1 I use in my blog post content. This affects the consistency of the look. I have to use H4 in my blog post content to match the H1 of the blog post title, which goes against SEO best practices.

Is there any way I can make them aligned?
Also, how do I adjust the size of H1 to H6?

Thank you.

[tristup]

Hi @bentkieran,

Thanks for reaching out.

The style of Title you are referring to is adjusted through a class named entry-title whereas the h1 tag you referred is a part of the content and it does not contain any class.
To make the font size similar for both, you need to add a small piece of custom CSS code to Theme Option > CSS.

h1.entry-title 
{
    font-size: 400% !important;
}

The above code will work if copied as it is and doesn’t conflict with any existing code.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We do not provide support for custom codes that means we can’t fix it in case it conflicts with something in your site nor will we enhance it.

You can also get the options to control the different typography from the Theme Options > Typography tab.

Thanks

[bentkieran]

makes sense. in the Typography menu, the only adjustments I can make are for letter spacing. Can I adjust the font size of H1 to H6? How are they determined? Thank you.

[tristup]

Hi @bentkieran,

Regretfully, there are currently no options available in Theme Options, where you can set the global size for the headings but you can do it by adding the following CSS blocks in Pro/X > Theme Options > CSS

h1, .h1 {
    font-size: 30px;
}

h2, .h2 {
    font-size: 28px;
}

h3, .h3 {
    font-size: 26px;
}

h4, .h4 {
    font-size: 24px;
}

h5, .h5 {
    font-size: 23px;
}

h6, .h6 {
    font-size: 20px;
}

The above code will work if copied as it is and doesn’t conflict with any existing code.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We do not provide support for custom codes that means we can’t fix it in case it conflicts with something in your site nor will we enhance it.

Thanks

[bentkieran]

thank you. 1 last follow up question, what is the font size for h1.entry-title ? I will like my H1 to match that font size. Appreciate your kind support as always!

[prakash_s]

Hi @bentkieran,

Please add this custom CSS code into your X/Pro -->Theme Option -->CSS. Please change the font-size value as per your design.

h1.entry-title
  {
      font-size: 400% !important;**
  }

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps you.
Thanks

[bentkieran]

awesome. Thank you as always!

[christian]

You’re welcome. Glad we’re able to help.