Responsive Headers + Sizing

Support
#1

How can we find the size of our headers? And how can we make them responsive?

If we set the H2 font size in CSS then it is no longer responsive. How do we set the font size of H2 whilst keeping in repsonsive?

#2

Hi There,

Please assign a my-headline to your headline:

After that add the Responsive Text includes the my-headline class above:

Hope it helps :slight_smile:

#3

From what I can see, what you have shown me works in cornerstone for individual pages. I need to adjust my headers in my posts.
I tried using this code;

@media and screen (max-width: 414px){
h2 .h2 {font-size: 20px !important;}
}

But for some reason nothing changes

#4

Hi There,

Thank you for writing in, please navigate to Theme Options > Typography and configure your Root Font Size properly.



This will be your base font size for various screen sizes.

For example on the small screen, you have the root font size of 14px, then the h2 are set to font-size: 285.7%;.
Assuming that there is no other custom CSS that is conflicting this formula, so that would be (14 * 285.7% = 39.998) 39.998px is the size of your h2 on mobile (small screen,).

Basically, that is how the Root Font Size step mode works, assuming that there is no other custom css font-size on the way.

Hope this shed some lights,
Cheers!

#5

Yeah I understand how the step works however when I get my headers to the right size then my paragraph is way to small.

Is’nt there a way to change the % changes because they are simply to high

#6

Hi There,

If that is the case then you need to adjust the font-size of the headline instead.

e.g.

h1, .h1 {font-size: 250%;}

h2, .h2 {font-size: 200%;}

/*and so on*/

Hope it helps,
Cheers!

#7

That’s the one! Always the simplest fixes that work. thanks very much for this

#8

Cool, glad we could help, Cheers :blush:

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.