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

Testimonial Grid using CSS Grid & Flexbox

@cdc2021

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


Hiya,

Any feeback would be welcomed specifically class spedification and responsiveness.

Thank you :)

Community feedback

Gerben Dol 3,115

@GerbenDol

Posted

Hey Chris-Ann! Great job on the layout!

There's a couple of things I'd keep in mind regarding the design:

  • The font-size is a bit small in my opinion, it's a bit hard to read
  • Make sure to check sizes and spacing within the cards. For example right now the profile photos are a bit too big and the margin below the photo is a bit small.

It's details like this that will get your solution from looking good to looking great!

1

Gerben Dol 3,115

@GerbenDol

Posted

Oh, and I forgot to mention: your hover transition on each card is nice, but it snaps back with no animation when you leave the card. I'd add the animation to the card both on hover and on leaving it! 😁

1

@cdc2021

Posted

@GerbenDol Thank you so much for your feedback :)

On reflection I can see the extra details that were missing/improvment. All resolved, much appreciated!

1
JK 345

@JakubKepak

Posted

Hi Chris-Ann C. ! Nice work 👏

To centre all content to the centre of a page a would set display:flex to the body and then add justify-content: centre and align-items: centre. In order to work, you would also need to set the property height on the body element. For instance height:100vh. Also, I would maybe set max-width proepty to .wrapper in order not to fill all space in wide screens.

Anyway, nice job! Keep improving 🙌

1

@cdc2021

Posted

@JakubKepak Thank you very much for your feedback, much appreciated :)

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