Skip to content
Submitted 4 months ago

Product preview card with flexbox and grid

P
cookie-monster01•220
@cookie-monster01
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 are you most proud of, and what would you do differently next time?
  • Using CSS Grid and Flexbox
  • Learning that button should can have a display of inline-flex instead of flex.
  • Using min-width to adjust image-size.
  • Using BEM naming method
  • Practicing to keep the code robust and readable.
What challenges did you encounter, and how did you overcome them?

Card image - width of 50% on card image and the class of card_details, ended up scaling the image down.

But applying min-width on the image adjusted the image to 50% of the card width and 100% of the height.

What specific areas of your project would you like help with?

All kinds of feedback and different approaches to the solution would be helpful. Thank you.

Community feedback

  • shaikh zayed•70
    @undersigned-devPosted 3 months ago

    It looks very well made. i liked that you declared some boiler plate css first like variable and box-sizing. I tried a different approach with less lines of css, But well done 👍

    0
  • Aaron Hoyos•70
    @chochimusPosted 4 months ago

    Very clean solution! Nearly identical to the challenge. I also like your idea of sizing main/.card_content, will have to try this in some of my own projects.

    0
    P
    cookie-monster01•220
    @cookie-monster01Posted 4 months ago

    @chochimus Thank you :)

    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