Grokking CSS Design Patterns to Ace Interviews/

...

/

Problem: Adaptive Profile Card

Problem: Adaptive Profile Card

Try to build a responsive profile card using CSS Container Queries that adapts layout and typography across breakpoints while keeping a square avatar.

We'll cover the following...

Problem description

Given a <div class="profile-card"> containing an <img class="avatar">, a <h3> for the username, and a <p> for the bio, write CSS so the card:

  • Displays vertically stacked (avatar, heading, and paragraph) when its container inline size ...