Skip to content
Submitted over 1 year ago

Product-review-card

udaymishra04•150
@udaymishra04
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

I faced dificulty while setting the layout and one thing that troubled me was how to change image when a media query is triggered

Community feedback

  • C4rlos•410
    @solracssPosted over 1 year ago

    https://fedmentor.dev/posts/html-plan-product-preview/

    Check here where Grace expained <picture> tag for image.

    0
    udaymishra04•150
    @udaymishra04Posted over 1 year ago

    @solracss Yeah sure I will check it. Thank you

    0
  • Aimal Khan•2,260
    @Aimal-125Posted over 1 year ago

    You can change image when media query is triggered by setting the desktop image to: display : none; When mobile media query is triggered. And you can change mobile image to: display : none; When desktop media query is triggered. For example:- .desktop-img { display: block; } .mobile-img { display: none; } @media screen and (max-width: 1100px) { .desktop-img { display: none; } .mobile-img { display: block; } }

    0
    udaymishra04•150
    @udaymishra04Posted over 1 year ago

    @Aimal-125 Thank you for your feedback

    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