All comments

• 

  Oranga•40

  @Gh0stByt3sSubmitted over 1 year ago

  How to make a mobile image work in mobile view and desktop image work at desktop view

  

  Product Preview Card Component with Flexbox

  2

  50
  

  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
• 

  Ahmed Mangood•50

  @ahmed-mangoodSubmitted almost 2 years ago

  

  Product preview card component

  2

  10
  

  Waldo•250

  @Waldo3333Posted almost 2 years ago

  I noticed you used the desktop image for the mobile background =

  "@media max-width: 799px { .card .card-img { width: 340px; height: 472px; border-bottom-left-radius: 8px; background-image: url('images/image-product-desktop.jpg'); } }"

  and the mobile image for the desktop size =

  "<div class="card"> <img class="card-img" src="./images/image-product-mobile.jpg" alt="">

  </div>"

  may switching them could fix the image glitch :)

  Marked as helpful

  0