I’ve followed your tutorial on implementing a fluid type scale using CSS custom properties (as shown in this guide: [insert tutorial link if possible]) and added the following code to my site:
:root {
–cs-sm: clamp(0.8rem, 0.08vi + 0.78rem, 0.84rem);
–cs-base: clamp(1rem, 0.23vi + 0.94rem, 1.13rem);
–cs-md: clamp(1.25rem, 0.45vi + 1.14rem, 1.5rem);
–cs-lg: clamp(1.56rem, 0.79vi + 1.36rem, 2rem);
–cs-xl: clamp(1.95rem, 1.29vi + 1.63rem, 2.66rem);
–cs-xxl: clamp(2.44rem, 2.02vi + 1.94rem, 3.55rem);
–cs-xxxl: clamp(3.05rem, 3.06vi + 2.29rem, 4.73rem);
}
I made sure to:
Add the CSS inside Global CSS in the Cornerstone/Pro Theme settings.
Apply these variables correctly in headings using var(--cs-xl), etc.
Test in incognito mode and multiple browsers.
The problem:
The font sizes will work then i refresh the page and they don’t scale fluidly as expected — sometimes it looks like the variables are not applied at all. I’ve also tested disabling NitroPack optimization features (Remove Unused CSS, Combine CSS, etc.), but the issue persists even without caching/optimization.
My website is: https://www.orionhealing.com/
Thanks in advance for your help!
