Responsive Fonts With Clamp

Hi there,

I am building a website for a client with Elementor Pro. The client has paid for the license, so I don’t have login details to be able to post a support ticket on your website.

I normally use other plugins like Oxygen and Divi, and I can easily use this website, https://websemantics.uk/tools/responsive-font-calculator/ to set my fonts to be responsive. Below is the code I have placed in Elementor => Site Settings => Custom CSS :

html {
    font-size: 62.5%;
}

h1 {
  font-size: clamp(5rem, calc(5rem + ((1vw - 0.36rem) * 1.087)), 6rem);
min-height: 0vw;
}

h2 {
  font-size: clamp(4rem, calc(4rem + ((1vw - 0.36rem) * 0.5435)), 4.5rem);
  min-height: 0vw;
}

h3 {
  font-size: clamp(3rem, calc(3rem + ((1vw - 0.36rem) * 0.5435)), 3.5rem);
  min-height: 0vw;
}

h4 {
  font-size: clamp(2.5rem, calc(2.5rem + ((1vw - 0.36rem) * 0.5435)), 3rem);
  min-height: 0vw;
    }

h5 {
  font-size: clamp(2rem, calc(2rem + ((1vw - 0.36rem) * 0.5435)), 2.5rem);
  min-height: 0vw;
}

p {
  font-size: clamp(1.4rem, calc(1.4rem + ((1vw - 0.36rem) * 0.2174)), 1.6rem);
  min-height: 0vw;
}

The font is set correctly on large screens sizes, but when the screen size is reduced, the fonts remain at the high end of the range, and do not reduce accordingly.

I managed to do it correctly on one font, where I gave the font a class, but don’t want to have to give each font element a class. I would just like to use H1, H2, p, etc.

Is this possible, or do I need to give each element a class to make it work?

Regards,

Ryan