Submitted 11 months ago

Product preview card component using css flex

Vladimir Gatara• 250

@vgarmy

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 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• 2,000

@MaximilianoDanielGarcia

Posted 11 months 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

Vladimir Gatara• 250

@vgarmy

Posted 11 months ago

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

Basha• 330

@Bashamega

Posted 11 months 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

Vladimir Gatara• 250

@vgarmy

Posted 11 months ago

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

Basha• 330

@Bashamega

Posted 11 months ago

@vgarmy your welcome

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