Grokking CSS Design Patterns to Ace Interviews/

...

/

Problem: Adaptive Card Component

Problem: Adaptive Card Component

Try to design a two-column layout with a 1rem gap that responsively shifts to a single column below 600px using CSS Grid and media queries.

We'll cover the following...

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