Skip to content
Submitted 4 months ago

Product Preview Card

Maan Al-Hababi•190
@MaanAlHababi
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

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-devPosted 4 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
    0

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