Design comparison
Solution retrospective
I'm most proud of 3 things. 1. Finishing or at least completing this project. I know it's a small one, but it has been a while since I've completed something here. 2. How good the spacing is for the elements. 3. Implementing some functionality with react and typescript in my button element.
Next time, I will consider both the mobile and laptop screens when deciding how to establish components.
What challenges did you encounter, and how did you overcome them?My biggest challenge had been the positioning for the main card, and how to space the elements within the card. I took my time looking for helpful resources and videos about positioning and spacing.
What specific areas of your project would you like help with?I'm not 100% sure if my spacing is exactly like the example given, so I am open to hearing about that. Specifically, the section that has item details.
Community feedback
- @raswondersPosted 3 months ago
Hi @Sean-LH,
congrats on finishing this solution! I like you approach regarding, responsiveness of an image, it works great here.
Overall solution looks good on desktop but it falls short on extra wide displays or when I'm resizing from mobile to tablet. I think main culprit here is that you've decided to use absolute positioning as layout building tool. There are much better alternatives like a flexbox or grid. With flexbox page container you can easily control positioning of your card across devices of all sizes. You can also add some margin so there is breath room around the card on small devices.
Hope i made a sense and it gave you right idea Cheers
Marked as helpful0
Please log in to post a comment
Log in with GitHub
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