Skip to content
Submitted about 2 years ago

Here is my solution to the Card-Product-Component

Lucas Santos•70
@FromlukDev
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

Here is my solution to the card product component.

I tried to use the [vertical-align: middle;] at the [div class="pricing"] to align the prices. But no success. Then I used [position: relative, bottom: .8rem;] in the class [.price-cut]. Let me know how would you do it.

Thank you

Community feedback

  • Aatypic•490
    @AatypicPosted about 2 years ago

    Hello, congratulations on your solution, it's looking good !

    Now for your question, on the container .pricing give it display: flex and a align-items:center, and you could also play with gap to place the .price-cut class. Also I noticed the card doesn't respond well to a mobile version, like the designs (375px) that comes with the challenge, maybe it's next on your list ? :)

    Good luck

    Marked as helpful
    0
    Lucas Santos•70
    @FromlukDevPosted about 2 years ago

    @Aatypic Thanks! Oh that works great also. The display: flex does the job!

    About the mobile version, it's weird cause it seems to work alright on my machine. The old saying "It works on my machine" hahahah but is true :p

    Can you tell me which browser you are using? I tested in Chrome and in Firefox here it seems ok.

    1
    Aatypic•490
    @AatypicPosted about 2 years ago

    @FromlukDev, Never mind looks like today it's working just fine haha

    Marked as helpful
    0
    Lucas Santos•70
    @FromlukDevPosted about 2 years ago

    @Aatypic 👍🏼😁

    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