-2

For a new WordPress theme, I'm using fluid-typography (https://fluid-typography.netlify.app) to scale the fonts accordingly. During development when logged in as admin everything works smoothly. As soon as I log out of WordPress and view the page, the browser suddenly doesn't recognize the "clamp(...)" value for the font size (invalid property value) and uses a fallback. What could be the reason for this?

font-size: 4.0625rem; /* <- used as fallback, when I am not logged in */
font-size: min(max(1.75rem,3.3vw+1rem),4.0625rem);
font-size: clamp(1.75rem,3.3vw+1rem,4.0625rem); /* <- used from the browser when I am logged in */
fabi
  • 53
  • 5

1 Answers1

1

NOTE: this answer is spurious as there was a syntax error (lack of spaces either side of the + operator). See comments. I don't know your full WP environment so can only guess that you have some pre processing of the CSS going on because a couple of your expressions are not legal CSS. They need to be in calc functions.

This snippet does that and it seems to work OK:

div {
  font-size: 4.0625rem;
  /*  used as fallback, when I am not logged in */
  font-size: min(max(1.75rem, calc(3.3vw + 

> Blockquote

1rem)), 4.0625rem);
  font-size: clamp(1.75rem, calc(3.3vw + 1rem), 4.0625rem);
  /* <- used from the browser when I am logged in */
}
<div>Hello</div>
A Haworth
  • 30,908
  • 4
  • 11
  • 14
  • You are right. The CSS file is optimized by WP-Rocket. However, the lines of font sizes are the same. Anyway, using calc() helped and the browser now always accepts the font sizes. :) Thanks a lot! – fabi Aug 05 '21 at 18:54
  • 1
    @fabi they don't need to be within calc(), you need to add spaces between operators `font-size: min(max(1.75rem, 3.3vw + 1rem), 4.0625rem); font-size: clamp(1.75rem, 3.3vw + 1rem, 4.0625rem);`. the code of this answer should also fail, I am suprised it's not – Temani Afif Aug 05 '21 at 19:41
  • @TemaniAfif yes indeed you are right! Apparently WP-Rocket removes the spaces inside the clamp(...) function automatically with the CSS compression. However, the spaces are not removed if the expression with the operators is inside calc(...). That's why it worked for me. Thanks for the help!!! – fabi Aug 07 '21 at 04:54