Skip to content
Submitted over 1 year ago

responsive product card created using css +html

cube-css
Naglaa Raslan•860
@codeAndcocoa
A solution to the Product preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Is there anything you think is missing in my solution? Does my solution look good on both desktop / mobile screens?

p.s: if you open my live URL and find no colors, please wait for a minute or two and refresh the page

thanks in advance :)

Code

Please log in to post a comment

Log in

Community feedback

  • Daniel Barda•240
    @daniel-barda

    Hi,

    I haven't checked on mobile, but on desktop, the layout is not displayed correctly because you forgot to set grid-template-columns in .product-box-grid.

    Additionally, I highly recommend avoiding the use of pixels (px).

    This is because pixels do not respect the user's browser font size.

    I suggest always using rem instead.

    Furthermore, I'm attaching an article that could be very helpful for your future projects.

    Good luck moving forward! 😊

    Pixels vs. Relative Units

    62.5% Font Size Trick

    Marked as helpful

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