Design comparison
Solution retrospective
The only thing I had to look up for this was how to adjust the width of anchor tag elements. That does highlight that I am lacking some fundamental information such as the default display property for various common element types, but that's information that easily comes with time.
What challenges did you encounter, and how did you overcome them?I initially opted for a mixing of flexbox and grid layouts to layout the elements and in doing so I was surprised that elements weren't centering like I expected them to. I did end up getting this working, but I ultimately decided to just use margins to space out elements.
What specific areas of your project would you like help with?I'm still not sure how of the best way to approach defining the widths for these kinds of cards. A view like this should be highly reactive as much of its base width is just padded out space for the sake of it. However, I am statically setting the width of the component and using min-width in child elements which prevents reactivity.
Community feedback
- @rezanahiPosted 8 months ago
Fantastic
I have considered the width of the card to be 380 pixels in my project. Additionally, I have set a breakpoint where I changed the width of the card. I hope this helps.
@media (width < 420px) { body{ padding: 0 1rem; } .card{ max-width: 100%; } }
1
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