H1, 2, and 3 are too big

[kjcfmt]

I am using the X Theme Ethos stack and the H1,2,and 3 headings are way too big. It’s also worse on mobile devices. Is there an easy way to change the font size for headings in the theme settings? Thank you.

[jade]

Hello Kasey,

The size of the heading elements are set by the default CSS of the theme that are in % value. However, you can override those sizes by adding some custom CSS in X > Theme Options > CSS like this:

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

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

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

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

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

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

Here are some related links for further reading:

• Intro to CSS - https://goo.gl/mFuWQT
• How to get CSS selectors - https://goo.gl/BmoH39
• Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa

Hope this helps.

[kjcfmt]

Thank you Jade! That worked perfectly.

[Prasant]

You are most welcome.