Skip to content
Submitted 11 months ago

Product Card Component (Mobile First Design)

Eric Tan•70
@erict16
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 project is a really good practice for beginners. I learned using flexbox and responsive design. However, I am not for sure my css code is clean or not. Welcome feedbacks!

Community feedback

  • JimTK16•370
    @JimTK16Posted 11 months ago

    Nicely done Eric.

    I'm a beginner too, so take my words with a grain of salt :). I think in general we should avoid setting a fixed width for image or element. Instead, for the container you could set a max-width, and for the image you could set width: 100% so it take the full width of its parent.

    Jim

    Marked as helpful
    1
    Eric Tan•70
    @erict16Posted 11 months ago

    @JimTK16 Thanks Jim!

    1
  • Uwuigbe Julius Osemwengie•380
    @Call4juliusPosted 11 months ago

    Nice code.

    I think you are not relying on inheritance enough, hence, it makes you repeat yourself.

    Also, why do you need TWO media queries?

    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