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

Basic HTML,CSS

Athreya G 410

@AthreyaG4

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 cant seem to remove the big gap in desktop view for the last card. Any suggestions appreciated.

Community feedback

HYDROCODER 555

@HYDROCODER

Posted

Hey there! Great job! You have even put media queries for the medium sizes and it works amazing! The gap may be from the fact that you used .9fr for the columns in the styles of your main tag. Just use grid-template-columns: repeat(4,1fr), give it a width and a max-width (for starters, try this: width: 70%; max-width:1200px and change it around if you wish). The gap will be reduced and all the cards as a whole will not stretch for larger screen sizes. You may even vertically center the whole thing for larger screen sizes using grid or flex on the body.

Hope it helps :).

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