Skip to content
Submitted over 1 year ago

Perfume Responsible Card

BrunoMoleta•700
@brunomoleta
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

How to switch images from desktop to mobile(or vice-versa) properly?

I put the first in the HTML and, when it hit width>40rem I hide it, showing the mobile version with a :beforepseudo-element.

Though I know it's not good because, on the mobile, the image won't be accessible to screen-readers.

Can you give me a review related to that, please?

Best regards from Brazil :)

Community feedback

  • Account deleted

    Hello Coder🙂

    your solution is great 🎉

    You can use <picture> tag to switch image

    Picture tag :

    <picture>

<source media="(min-width: 597px)"
srcset="./images/image-product-desktop.jpg ">


<source media="(min-width: 0px)" 
srcset=" ./images/image-product-mobile.jpg">

<img src="./images/image-product-mobile.jpg" alt="Product_image">

</picture>

    and you also can take a look of my solution✨ that will definitely going to help you 👀

    I hope that will be helpful for you✌️

    Marked as helpful
    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