Product Preview Card Component with Flexbox

As i did for this challenge, use picture tag to set multiple image sources for different image sizes.

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

read this The Picture element - This helped me to get useful information about picture tag in html.

Hi there, instead of setting the img directly in your html what you can do is setting a background-image to your div in css,

Then using a "@media (max-width : 375px)" still in your css, you can easily change the background-image of your div so it select the mobile image once the size of the screnn goes under 375px

like this, css :

.card__img-box { background-image : url ( your desktop size image ) }

@media (max-width : 375px){

.card__img-box { background-image : url ( your mobile size image ) }

}

Then so the image goes on top of your text div under 375px, using the same @media technique, you can change the display of your parent div, class="card" ( the one that include the div of your img part and the div of your text part) :

.card { display : flex }

@media(max-width : 375px){

.card {

display : flex ;

flex-direction : column}

}

So when your screen goes under 375px the display changes !

Hope it helps, see ya