Grokking CSS Design Patterns to Ace Interviews/

...

/

Solution: Responsive Testimonial Carousel and Grid Visibility

Solution: Responsive Testimonial Carousel and Grid Visibility

Let’s switch between carousel and grid layouts for testimonials based on screen size.

We'll cover the following...

Problem description

Given an HTML page with a testimonial section containing two main elements:

  • A <div class="testimonial-carousel"> that wraps multiple <div class="testimonial-item"> elements (each containing .testimonial-text and hidden .author-photo)

  • A <div class="testimonial-grid"> that wraps multiple <div class="testimonial-item"> elements (each containing .testimonial-text and an <img class="author-photo" src="...">, hidden by default)

Write CSS to ensure the layout adapts responsively across three ...