Change heading sizes across site?

[eyedia]

I’m having a hard time figuring out the best way to change the heading sizes across the site. I know I can do this in my css, but isn’t there a better way? I couldn’t find anything in the documentation, only for the body font sizing.

I’m using the ethos stack.

Thank you

[nabeel]

Hi there,

Thanks for writing around! You probably need CSS to change the heading sizes across the site at once, please see https://xthemeusers.com/code-snippet/change-header-font-sizes/

Hope this helps!

[eyedia]

It seams strange that this isn’t built into the customizer. Wouldn’t it make sense to be able to define the sizes for all the headings there? Also, if I change the sizing in my css, i’ll loose the responsive sizing.

[Prasant]

Hello @reform,

You can use CSS media queries to change font size of heading. That way it will only effect desktop version of the website. Please add following CSS under X > Launch > Options > CSS :

@media only screen and (min-width: 900px) {
   h1, .h1 { font-size: 35px; margin-top: -25px;}
h2, .h2 { font-size: 28px; padding-bottom: 15px;}
h3, .h3 { font-size: 18px; }
h4, .h4 { font-size: 15px; }
h5, .h5 { font-size: 10px; }
}

Thanks.