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

@vvvasavii

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


What specific areas of your project would you like help with?

how can i make the 4 cards smaller in width,similar to the design?whenever i use the grid template column for it it just wasnt doing what i intended it to do. any help is greatly appreciated

Community feedback

haquanq ®️ 1,585

@haquanq

Posted

Hello @vvvasavii 👋👋👋

This is my thought on how to improve your solution:

  • To make your solution closer to the design, instead of focusing on width or height, you need to think about typography first (font-size, font-weight, font-family, line-height, letter-spacing, ..).
  • Then, try to figure out how each small element is spaced between each others (ex: how close is the paragraph to the title) how should the margin or padding be set, what is the size of that grid gap vertically and horizontally?. (most of the time you would like to never be using fixed width or height since we can use margin and padding)
  • Later you would want to find a correct maximum width of the container of these cards so that it matches the design

If you want, you can check out my solution for this challenge

Hope this help 🤖🤖🤖🤖

1

@vvvasavii

Posted

Thanks,I'll keep that in mind:D @haquanq

0

@TerezL

Posted

Well done!

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