Responsive product card using Flexbox and custom CSS

Solution retrospective
One of the main challenges was building the layout without access to the original Figma file for spacing and sizing guidance. I relied on visual comparison and the provided style guide to approximate font sizes, paddings, and alignment.
Another issue was maintaining consistent spacing and image proportions across screen sizes. I overcame this by using a mobile-first approach with flexbox, avoiding fixed heights, and adjusting padding and flex-basis carefully during media queries.
Please log in to post a comment
Log in with GitHubCommunity feedback
- P@Sebastienpanda
Good evening! Congratulations on your project!
For better semantics, you can use main You can use loading lazy on your image for a better display speed
But otherwise the rest is great!
Happy coding!
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