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 landing page using CSS Grid and flex-box

#accessibility

@leahthompson01

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


I have a slight gap between the names and where it says verified graduate. I tried a couple of different things, like flex-box, putting them in a div, etc. to fix it but this was as close as I could get. Please let me know if you think of anything that might help!

Community feedback

Adarsh 1,560

@adram3l3ch

Posted

The gap is caused by the margin of h2 tag. you have to set that to 0 to get rid of the gap

Marked as helpful

1

@leahthompson01

Posted

@adram3l3ch Thank you, this fixed it! I was confused because I knew I didn't set a margin to my h2 elements, but I didn't think about how it already has a margin.

1
Adarsh 1,560

@adram3l3ch

Posted

@leahthompson01 every element tag in html have its own margin and paddings. A reset in the beginning could avoid the confusion

*,*::After,*::before{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
0

@zastar23

Posted

Hello, to get rid of the space between the name and the verify graduate, just change the line-height in the div containing them and you should be good to go.

Overall nice job done!

0
Travolgi 🍕 31,500

@denielden

Posted

Hi Leah, great work and congrats on completing the challenge!

use a div for the body of the card and not section... section is suitable for page sections, read here -> Section use

Also don't forget to look at the report issues.

Overall you did well, keep it up!

Happy coding!

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