Skip to content
Submitted over 2 years ago

Responsive product preview card using CSS Flexbox

Victor Okpukpan•110
@Victor-Okpukpan
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

I somehow struggled when I was trying to place my image perfectly into its container. Any suggestions on how to make this easier will be appreciated, thank you.

Community feedback

  • Marzouq Adebayo•90
    @AdebayoMarzouqPosted over 2 years ago

    Nice work, Victor. Add the image by setting your image height and width to 100%, set a object-fit property of 'cover'. Since you have your image in a nested div, you need to set that div to a 100% height and width too. There are several ways to do it and I hope anyone with a better suggestion will share theirs too :)

    Marked as helpful
    0
    Victor Okpukpan•110
    @Victor-OkpukpanPosted over 2 years ago

    @AdebayoMarzouq Thank you so much! I redid the challenge so the picture could be shown.

    1

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