Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive testimonial using CSS Grid

Haleβ€’ 330

@halelite

Desktop design screenshot for the Testimonials grid section coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Community feedback

Lucas πŸ‘Ύβ€’ 104,420

@correlucas

Posted

Hello Hale, congratulations for this beautiful solution.

I just saw your live site and the Git repository and your solution is great, the grid is just perfect mobile and desktop.

I've three tips for semantic and one for the design:

1.The line-height for the card main heading seems a too much, I think the gap between the lines is around 1.2.

2.Try to avoid using div for the main blocks, in this case is better wrap these groups elements with a semantically tag. For example, all the elements inside the <main> and <section> for each card and <blockquote> for with paragraph with the text clothe inside. This way you communicate better what is inside each element, div is only a block element without meaning.

3.If you want to take this challenge to another level you can create a media query for tablet with a different grid layout.

Your challenge is already good, these tips are only details.

Hope it helps and happy coding.

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord