Using Calc with Text

[ankit_ojha]

Hi there,

I just discovered that calc can be used for responsive text, and I’d like to know if there’s an article in the knowledge base that can direct me to properly using the “calc” function? I’m aware we have a responsive text option, but it’s unfortunately connected only to the single page, and I can’t necessarily make a template with it, so I’m thinking of making calc a viable option. Can anyone please help me out on this? It will do this ignorant soul a whole lot of good lol.

Thanks
Ankit

[jade]

Hello Ankit,

The calc value basically functions the same way as the CSS calc function.

Please check this links if you want to read about them more:

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

A Couple of Use Cases for Calc() | CSS-Tricks

Hope this helps.

[ankit_ojha]

Hi Jade,

It’s a lot more confusing to me than would otherwise be for the web developer. But thank you anyway; I’ll try to work with this, although I know it will be highly unlikely I’d be successful haha.

Thanks
Ankit

[christian]

Hey Ankit,

Just play around with a vw + em or px units. Here’s another tutorial that might help.

[ankit_ojha]

Hi Christian,

I’ve basically maybe had a way out, but now I don’t know how to reverse engineer it - I used a “@ media screen” line of code but that has html instead of any element class. Help? (I will be, or will have, attached requisite links and a un/pw in a secure note if that helps).

[ruenel]

Hello @ankit_ojha,

If you are using “@media” then it is best that you add a custom my-element class to your element instead.
You can insert the custom class in the “Customize” tab of the element settings. Finally, you can have a code something like this:

@media(max-width: {n}px){
  .my-element {
    // your styling here
  }
}

The code above will only be applied to an element that has the custom class. If you want to specify the section, the same process will do by adding a custom my-section class to the section settings and have a code like this:

@media(max-width: {n}px){
  .my-section .my-element {
    // your styling here
  }
}

Hope this helps.

[ankit_ojha]

Hi RueNel,

God bless you guys!

Ankit

[paul.r]

Thank you!