Search⌘ K

Adaptive Profile Card

Explore how to build an adaptive profile card using CSS container queries to switch layouts based on container size. Learn to maintain avatar aspect ratio and adjust typography responsively, enhancing your skills in intrinsic and container-based design.

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 ...