Grokking CSS Design Patterns to Ace Interviews/

...

/

Solution: Fluid Hero Heading and Subheading

Solution: Fluid Hero Heading and Subheading

Let’s create fluid typography for hero section headings and subheadings using CSS variables that interpolate between min and max sizes based on viewport width.

We'll cover the following...

Problem description

Given a .hero section containing <h2> and <h3>, write CSS rules to:

  1. Define CSS custom properties --min-heading (32px) and --max-heading (56px). ...