Grokking CSS Design Patterns to Ace Interviews/

...

/

Solution: Adaptive Profile Card

Solution: Adaptive Profile Card

Let’s 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 is < 250px.

  • Displays horizontally (avatar left, text right) with 0.875rem h3 ...