Skip to content
Submitted over 2 years ago

Product card submission 1

Ola•40
@O-O26
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

This is my first attempt and I struggled a bit with the styling on the desktop version but I think that it is fairly accurate. However for the mobile view, I am not sure where things went wrong.

Community feedback

  • Fatlind Shehu•2,230
    @fatlindshehuPosted over 2 years ago

    Hi @O-O26,

    Congrats on your first challenge, you can improve it this way:

    • .grid{ overflow: hidden; } to show the border-radius, right now you cannot see it!
    • You shouldn't use two different images for the component
    • You should use the same img, just change the layout direction
    • Try using flex for this kind of component it's very easy
    • If you're unfamiliar with flexbox check this tutorial

    Keep up the good work

    Marked as helpful
    1
    Ola•40
    @O-O26Posted over 2 years ago

    @fatlindshehu Thank you very much for your help.

    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