Grokking CSS Design Patterns to Ace Interviews/

...

/

Problem: Responsive Testimonial Carousel and Grid Visibility

Problem: Responsive Testimonial Carousel and Grid Visibility

Try to 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="..."> ...