Product Preview Card Component with Flexbox

Community feedback

• 

  Sasan Salehzadeh•470

  @sasanqcPosted over 1 year ago

  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.

  Marked as helpful

  0
• 

  Waldo•250

  @Waldo3333Posted over 1 year ago

  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

  Marked as helpful

  0