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

Testimonials Grid Sec: i used CSS grid , Flexbox, CSS Variables.

#bem#accessibility
Paulo Alba 140

@pauloAlba

Desktop design screenshot for the Testimonials grid section coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


In this project, CSS grid was used together with Flexbox. Always add CSS variables to control color. Any suggestions on what I could improve?

Community feedback

P
Jeuri Morel 1,405

@JeuriMorel

Posted

Give your body a min-height: 100vh; so that it takes up the full height of the screen. This way the content will be centered. The way you currently have it it's only as big as its content.

Also, you have no padding or margin preventing the cards from touching the edges which is rarely good. If you look at the designs you can see that there's space between the cards and the sides of the screen.

Looks like you forgot to add box shadows to the cards. If you are unsure on how to do so, check out the docs here.

Marked as helpful

1

Paulo Alba 140

@pauloAlba

Posted

Thanks for the tip! @JeuriMorel I hadn't noticed these details, I'll adjust it and send it again, if they sent the design measurements it would be easier, but that's what it is lol. Thanks!

0
P
Jeuri Morel 1,405

@JeuriMorel

Posted

@pauloAlba You're welcome. I think it looks really good now, good job. Yea, they keep the measurements behind a paywall. I'd recommend getting a pro subscription once you get into the more complex exercises, it'll save you a lot of headaches.

Marked as helpful

1

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