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 Section

Yuko-code 235

@Yuko-code

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


This is my 7th FM challenge. It's actually my first time using CSS grid. I think there are many things to fix but it was good practice to use grid. I wonder why font looks different.

Community feedback

bunee 2,060

@buneeIsSlo

Posted

Hey! @Yuko-code, A solid effort on this one! Here's a few things I'd like to suggest:

  • You can replace the <p> tag (that has the class "comment") with the <blockquote> tag, This is much more appropriate and makes the page much more accessible. Note: The <blockquote> tag has some default padding and margin, So you'll need to reset that to 0.

  • You can add another grid-template-areas at around 1100px. This makes it so that tablet users won't have any trouble reading the page.

eg:

grid-template-areas:  "item1 item2"
                      "item1 item3" 
                      "item4 item5"
  • The fonts look right.

That is all. Hope this helps :D

Marked as helpful

0

Yuko-code 235

@Yuko-code

Posted

@buneeIsSlo Thank you for the advice, this is very 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