Grokking CSS Design Patterns to Ace Interviews/

...

/

Problem: Multi-Range Fluid Typography with Media Query Overrides

Problem: Multi-Range Fluid Typography with Media Query Overrides

Try to build a multi-range fluid typography system with media query overrides and modular scales for headings and body text.

We'll cover the following...

Problem description

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

  1. Define CSS custom properties:

    1. Mobile root font: --min-root-mobile (14px) and --max-root-mobile (18px)

    2. Desktop root font: --min-root-desktop (18px) and ...