![](https://res.cloudinary.com/dz209s6jk/image/upload/f_auto,q_auto,w_900/Screenshots/dfw7s6wzatuikiaph1td.jpg)
Design comparison
Solution retrospective
I think I came pretty close. Some letter spacing or a font-size here or there might be slightly off, but other then two my major flaws, I should have gotten it mostly right.
What challenges did you encounter, and how did you overcome them?My two biggest problems where:
1.) The size of the cards and how they are exactly ordered and spaced out on the grid in the MockUp. If you look at the very bottom of my CSS-file you can see my grid area for the desktop view using an excessive amount of colums and rows. However, that was my only solution to get the size and spacing of the cards as close as possible to the actual spacing and sizing of the MockUp.
2.) In the MockUp you can see that the paragraph of the card to the far right card (Kira Whittle) uses a slightly different gap size between it's headline and it's paragraph and is probably meant to adjust dynamically. I tried everything from grids to flex for that, but just could not get it to work for me.
What specific areas of your project would you like help with?Maybe someone knows a better solution to my two problems. Or if you notice anything else, please let me know.
Community feedback
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