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
- @haquanqPosted 4 months ago
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
orheight
, 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
orpadding
be set, what is the size of that grid gap vertically and horizontally?. (most of the time you would like to never be using fixedwidth
orheight
since we can usemargin
andpadding
) - 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 - To make your solution closer to the design, instead of focusing on
Please log in to post a comment
Log in with GitHubJoin 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