Mobile First Testimonial Page using CSS Grid

Ashley 75


Desktop design screenshot for the Testimonials grid section coding challenge

This is a solution for...

  • HTML
  • CSS
View Challenge

Design Comparison




Accessibility Issues


HTML Issues

View Report

Ashley’s questions for the community

I would like feedback on the text wrapping in my design. I calculated the padding for each testimonial block at 30px, but the text is not wrapping exactly like the design images. I tried changing the padding and letter-spacing and nothing would produce the exact line breaks. Is there something I am missing?

Community Feedback

bunee 1,270



In my opinion, This is as close as you can get to the actual design. If you still wish to make the page pixel perfect... Maybe try tweaking the width of content-wrap ? And also this box-shadow: 18px 37px 57px -22px rgba(0, 0, 0, 0.2); is a more accurate box-shadow. Hope this helps :)

Marked as helpful


Ashley 75



@buneeIsSlo Thank you for your feedback. I overlooked the box-shadow and need to read more about it, so I appreciate the code and the reminder :)


Give some feedback to @alwodzicki about their solution...

Slack logo

Join our Slack community

Join over 100,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!