Submitted almost 2 years ago

Product preview card component

Jeremy• 200

@jeremy-prt

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

Hello, I have a question :)

Would you have an idea to put the price which is the smallest at the top and not at the bottom like the original, I did not succeed..

Community feedback

👾 Ekaterine Mitagvaria 👾• 7,600

@catherineisonline

Posted almost 2 years ago

For me, it looks like the small price is in the middle, not at the top 🤔 In any case, instead of using ul, you can place both prices in p tag, then place them both in the section/div tag and make this parent display flex, flex-direction row and make the align-items center

Marked as helpful

Jeremy• 200

@jeremy-prt

Posted almost 2 years ago

@catherineisonline it's good, I just added a display flex in my "li" and an align item center in my "ul" Thanks

👾 Ekaterine Mitagvaria 👾• 7,600

@catherineisonline

Posted almost 2 years ago

@worlzz Great 😎

EDOARDO PITACCIO• 180

@EdoPito

Posted almost 2 years ago

Hello Mate! This looks so good, I used:

vertical-align: text-top; to do that. You can check the code on my solution if you want to!!

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