Grokking CSS Design Patterns to Ace Interviews/

...

/

Problem: Viewport-Based Fluid Typography with Height Constraint

Problem: Viewport-Based Fluid Typography with Height Constraint

Try to implement viewport-based fluid typography that scales with both width and height while constraining extremes using nested clamp() logic.

We'll cover the following...

Problem description

Given a full-screen <section class="intro"> containing an <h1> and a <p>, write CSS rules to:

  1. Define CSS custom properties:

    1. --min-font: 18px

    2. --max-font: 48px

    3. --min-vw ...