Quick Question about Kadence, REM, Clamp, and Responsive

Loops & Logic
1

I finally made the leap from Beaver Builder to Kadence. So glad I did. (FWIW, I tried the new ‘theme’ features in Wordpress 6.2, the GeneratePress theme, and the Astra theme and found them all lacking by comparison to Kadence.)

Thanks to @julia, I use a bunch of classes in L&L that are based on REM values. In Beaver Builder, I made my root font-size responsive with the clamp function shown below. I did a lot of testing to make sure that doesn’t create a conflict.

I understand Kadence has font sizes for S, M, LG etc, but those are not as auto-magic as resetting the root. The code below seems to work great, but I don’t know Kadence well enough to know if I’m setting myself up for problems in the future.

Any thoughts would be appreciated.

html {
  font-size: 16px; /* fallback */
  font-size: clamp(1rem, 0.7955rem + 0.9091vw, 1.25rem);
}
body, input, select, optgroup, textarea {font-size: 1rem !important;}

P.S. That clamp function smoothly changes the root: for a screen size of 360px or below the font-size is 16px, for a screen size of 800px or above the font-size is 20px. That font-size ratio is maintained for anything that references REM. Calculator is here:

1 Like
2

I haven’t fully hopped on the clamp() train yet, but I usually do override the root font size in Kadence to inform my rem values, and haven’t had any issues with it. I’ll usually do something like this so that everything is optimally easy to calculate:

:root {
  font-size: 20px;
}
@media(max-width: 991px) {
  :root {
    font-size: 18px;
  }
}
@media(max-width: 767px) {
  :root {
    font-size: 16px;
  }
}
1 Like
3

Thanks. That’s exactly what I needed to know.

What you’ve done is very similar to mine, except you address root directly where I had used html. Clamp provides nice smooth transitions, but not many people will shrink and expand windows to watch the text sizes change.

The only drawback I’ve found is that when I based my heading sizes on REM, they didn’t show correctly in the customizer. Now I’ve set my header sizes explicitly for the three screen sizes.

Cheers, Richard

1 Like