Responsive Text / Headline - doesn't work

[PhilTone]

Hey there,

I’ve tried all the suggestions now and I can’t get my headline to be responsive.

I’ve added the class .h-responsive to the first headline on the page but nothing is changing.
The headline font-size is set to “em” - so it should work right?

What am I doing wrong?
Please help

[mldarshana]

Hi There @PhilTone

Thanks for writing in! Could you please try following this video guide on how to use responsive text feature (https://www.youtube.com/watch?v=C8PFBUOiGvM).

Hope that helps.

[PhilTone]

I did, doesn’t work

[christopher]

Hi PhilTone,

The font size is set to 10em which is not responsive. Please try to add another value to that. For example calc(10vw + 14px) value can be a good start, and then you can play with the numbers to find the best case scenario.

Please do not use the Responsive text feature as it is using the Javascript code and you already use the headline element which you can easily set a responsive font size as I mentioned.

Please read the reply below to know more about the way the value I suggested works:

Responsive text Header

kindly get back to us with the result of the steps above and URL/User/Pass of your WordPress dashboard using the Secure Note functionality of the post to follow up the case if you still have problems.

Thank you.

[PhilTone]

@christopher.amirian

calc(10vw + 14px)

Thx very much - that works! But could you give me a short inside as to how this calculation works?

[christopher]

The link I shared with you gives detailed information about the case. But sure thing:

It is the combination of the viewport based values and a font basic pixel based value.

The viewport value changes the size depending on the width of the browser. For more information:

https://css-tricks.com/viewport-sized-typography/
https://css-tricks.com/fun-viewport-units/

The problem of using the viewport based value as the font size is that the change is so drastic and it goes from a very big to very small one. With the addition of the pixel base such as 14px, the range gets handled better.

If you want more information on how calc() works in CSS please read the article below:

https://www.w3schools.com/cssref/func_calc.asp

Thank you.

[PhilTone]

@christopher.amirian

The link I shared with you gives detailed information about the case. But sure thing:

It is the combination of the viewport based values and a font basic pixel based value.

The viewport value changes the size depending on the width of the browser. For more information:

https://css-tricks.com/viewport-sized-typography/

https://css-tricks.com/fun-viewport-units/

The problem of using the viewport based value as the font size is that the change is so drastic and it goes from a very big to very small one. With the addition of the pixel base such as 14px, the range gets handled better.

If you want more information on how calc() works in CSS please read the article below:

https://www.w3schools.com/cssref/func_calc.asp

Thank you.

Ah thx very much - read over the the link you posted. Makes perfect sense!

[christopher]

Perfect Glad that we could be fo a help.