Hi,
Here’s my font scaling setup,
and here’s the CSS it outputs
@media (min-width: 500em) {
html {
font-size: calc(.3em +(.8 - .3) *((100vw - 500em) /(1200 - 500)));
}
}
In line 1, the 500em should be 500px and the same within the calc. 100vw-500px
500em is a hugely wide screen and 100vw-500em will always be negative.
This code snippet fixes it:
add_action('wp_head', function () {
// Read Pro’s Theme Options; fall back to sensible defaults
$unit = get_option('x_root_font_size_scaling_unit', 'em'); // 'em' or 'px'
$min = get_option('x_root_font_size_scaling_min', '1'); // default 1em
$max = get_option('x_root_font_size_scaling_max', '1.25'); // default 1.25em
$low = (int) get_option('x_root_font_size_scaling_lower_limit', 500); // 375px
$high = (int) get_option('x_root_font_size_scaling_upper_limit', 1200); // 1440px
// Guard rails
if ($high <= $low) { $high = $low + 1; }
// Convert min/max to px if values are in em
$min_px = ($unit === 'px') ? (float)$min : (float)$min * 16;
$max_px = ($unit === 'px') ? (float)$max : (float)$max * 16;
// Output clean, fluid root font-size using clamp()
echo '<style id="pro-root-font-fluid">
html{font-size:clamp('.$min_px.'px,
calc('.$min_px.'px + ('.($max_px - $min_px).') * ((100vw - '.$low.'px)/('.($high - $low).'))),
'.$max_px.'px);}
</style>';
});