Global change for heading sizes (h1, h2, h3 etc)

[cheadledatarecovery]

Hello,

I have searched the forum, and found someone with a similar issue, however, the response does not resolve the issue, see: https://theme.co/apex/forum/t/how-do-i-adjust-the-heading-ratio/40936

I am using Pro theme, Ethos stack. The size of the headings (h1, h2, h3 etc) are predetermined and as far as I am aware are based on percentages. E.g. H1 is at 400% of the root size. If I use the ‘Pro’ editor on a ‘Page’ and create a ‘Headline’ element or the ‘Classic Custom Headline’ then I can alter the display size easily of these.

However, I have a considerable number of pages/posts which were created in the standard HTML editor. I wish to be able to make a global css change so that percentage size of each heading is to my preference. E.g. h1 is at 300% rather than 400%.

Is it possible to find the current heading (h1, h2, h3, h4, h5, h6) size settings from the style.css? Or are these settings located elsewhere?

Thank you for your help,
John

[mldarshana]

Hi John,

Thanks for writing in! In that case, you can use CSS rules and add it into your X -> Theme Options -> CSS area to set those font sizes according to your preference.

h1, .h1 {
    font-size: 300%;
}
h2, .h2 {
    font-size: 250%;
}
h3, .h3 {
    font-size: 200%;
}
h4, .h4 {
    font-size: 100%;
}
h5, .h5 {
    font-size: {SET_VALUE};
}
h6, .h6 {
    font-size: {SET_VALUE};
}

Hope that helps.