Design comparison
Solution retrospective
Responsive Images! I had to learn about them, and I would appreciate feedback on my approach to styling them.
I did also encounter problems with flex alignment. The 'Add to Cart' button refused to be aligned to the bottom of my '.product-details' container when it should since I set align-self: flex-end
given
display: flex; flex-direction: column; }
Community feedback
- @hns-devPosted 5 months ago
Hi MaanAlHababi! Good job on completing the challenge!
It's not that align-self: flex-end didn't work, but there wasn't really any space left to push it down. You can check that in the web dev tool in your browser by clicking on the flex tag beside the element.
You could add the following line to fill the space in product-details evenly:
.product-details{ justify-content: center; }
Also, It's recommended not to set a specific height. If you really need to, use min-height property. Setting a specific height lead to responsiveness problems (in your case, the content overflow the product card, and it affected the image a bit.).
I'm not used to giving feedbacks, so if I wasn't clear enough, let me know. ^^
Marked as helpful0
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