Responsive Header Text from Desktop to Mobile

[fxground]

Hello,

I’m trying to put an element in my header which would print big header text on a desktop, but if the user was on a mobile would fit the screen there too. So I decided (this might be wrong) to use the responsive text shortcode and put this inside a header element:

[custom_headline class=“responsive-heading” type=“center” level=“h1”]Header Text
More Text[/custom_headline] [responsive_text selector=".responsive-heading" compression=“1.5” min_size=“10px” max_size=“512px”]

Am I going about this the wrong way? I want it to be BIG TEXT on the desktop from one side of the screen to the other… and to also fill it on a mobile but whatever size would fit… More details in the box below.

[rad]

Hi @fxground,

Thanks for reaching out.

It’s correct, the only difference from your provided code and to the actual site is minimum size, in your shortcode it’s 10px, but on actual site it is 32px. Please change it back to 10px.

Then test it again, another solution is using calc() for font size without a need for responsive text shortcode. Example,

calc(0.5em + 5vw)

You can add that to the font size setting of your text or headline element.

Thanks!