Grokking CSS Design Patterns to Ace Interviews/

...

/

Solution: Fluid Modular Scale with CSS Variables

Solution: Fluid Modular Scale with CSS Variables

Let’s define a fluid root font size with CSS variables and apply a modular scale to headings and paragraphs that adjusts with the viewport width.

We'll cover the following...

Problem description

Given a hero section with an <h1> and a <p>, write CSS rules to:

  1. Define CSS custom properties --min-root (16px) and --max-root (24px). ...