Search⌘ K

Adaptive Card Component

Explore how to build an adaptable card component by using container queries to switch between single and two-column layouts based on container width. Learn to preserve image aspect ratios and apply responsive font sizes without changing HTML, enhancing your understanding of intrinsic and container-based sizing in CSS.

Problem description

Given a <div class="card"> containing an <img> and a .content <div> with heading and paragraph, write CSS so the card:

  • Displays in a single column (image on top) when its container width is less than ...