Submitted about 1 year ago

Product Preview Card Component

naavemajid•80

@naavemajid

Preview site View code

This is a solution for...Product preview card component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

whiles working on the media query section to complete my project, it occured to me that l was given two images; one for desktop and the other for mobile (375px). However, l managed to set everything, but was not able to set my media query to change to the mobile image. with regards to this, l would be so honored if anyone could offer a solution as to how to go about it.

Thank you.

Community feedback

hitmorecode•6,250

@hitmorecodePosted about 1 year ago

You can try this. With the picture element you can easily do this.

<div class="card">
  <picture>
    <source media="(min-width: 673px)" srcset="images/image-product-desktop.jpg" alt="">
    <source srcset="images/image-product-mobile.jpg" media="(min-width: 375px)">
    <img src="images/image-product-desktop.jpg">
  </picture>
</div>

css

@media(max-width:673px){

Marked as helpful

Please log in to post a comment

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