Skip to content
Submitted about 1 year ago

Product preview card component using css flex

Vladimir Gatara•250
@vgarmy
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?

I like the mobil solution, and use of less code.

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

Hade som problems with the image.

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

None

Community feedback

  • MaximilianoDanielGarcia•1,980
    @MaximilianoDanielGarciaPosted about 1 year ago

    Hi Vladimir, great job!

    I've visited your live site and I've noticed that the card is a little bit taller that the design. My suggestion, you should remove the height property of your .card__container. Also, I think that your border-radius on button is too much, try change it for border-radius: 0.5rem.

    After apply all these it should look better.

    Marked as helpful
    0
    Vladimir Gatara•250
    @vgarmyPosted about 1 year ago

    @MaximilianoDanielGarcia thanks. fixed the css accoding to your suggestions. Much better now :)

    0
  • Basha•330
    @BashamegaPosted about 1 year ago

    Hello:) I think you can use flex in this challenge because it is only 2 rows. But it is always great to practice the grid. If you want to learn more about the difference you can checkout this link

    Marked as helpful
    0
    Vladimir Gatara•250
    @vgarmyPosted about 1 year ago

    @Bashamega thanks you :) I'll definitely look in to that!

    0
    Basha•330
    @BashamegaPosted about 1 year ago

    @vgarmy your welcome

    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