Skip to content
Submitted over 2 years ago

Product preview card component

Natnael•50
@NatnaelDemelash
A solution to the Product preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I always find the media query(making responsive) part difficult.

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • PadseFIAE•70
    @PadseFIAE

    Hello Natnael,

    your solution for the desktop looks fine to me.

    A problem with the responsive design is the fixed sizes of Elements. Try to use % attributes, this should help u for the resize on any screens. But u allready get a Link from Deevyn9, i think that will explain it a little bit deeper.

    The different between % and vh is that vh take care of the Viewport and the % of the parent Element (i learnd yesterday).

    Hope my tip will help u in future :-)

    Marked as helpful
  • Divine Obeten•2,415
    @Deevyn9

    Hi Natnael, congrats on completing this project, your solution looks really great.

    About the issue you say you have with media queries, have a look at this documentation, It should make you understand media queries more. Good luck.

    https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

    Happy Coding!

    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