less and less

container queries units

Delete resize script

/* ❌ JavaScript resize handler */
function resizeText() {
  const width = window.innerWidth;
  const fontSize = Math.max(16, 
    Math.min(48, width * 0.05));
  element.style.fontSize = fontSize + 'px';
}
window.addEventListener('resize', resizeText);

/* ✅ One line of CSS */
.fluid-text {
  font-size: clamp(1rem, 5cqw + 0.5rem, 3rem);
}

/* Minimum: 1rem, Maximum: 3rem */
/* Scales smoothly between */

Watch the text scale with container size...

Fluid Typography

This text scales smoothly between minimum and maximum sizes. No JavaScript, no resize handlers, just one CSS function with container query units.

🔄 Hover to pause animation and resize manually

One CSS func > JS calc.