Submitted 3 months ago

Product Preview Card

Maan Al-Hababi• 190

@MaanAlHababi

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Product preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

What challenges did you encounter, and how did you overcome them?

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

H.N.S• 310

@hns-dev

Posted 3 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 helpful

Please log in to post a comment

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