Product Preview Card

Community feedback

• 

  Achintya Keskar•40

  @SanePiePosted over 2 years ago

  Hey Dion, The way I did that is by putting both the images in the spot and then setting the display property as none of the img-mobile. I then added a media query wherein if the width gets below a certain limit then I display the img-mobile and set the display value of img-desktop as none and then further styled the img-mobile in the media query itself.

  /* Images */

  .img-desktop{ width: 100%; height: 100%; border-top-left-radius: 9px; border-bottom-left-radius: 9px; }

  .img-mobile{ display: none; }

  /* Media Queries */

  @media (max-width: 992px){ .img-desktop{ display: none; }

  .img-mobile{ display: block; height: 100%; width: 100%; border-top-left-radius: 9px; border-top-right-radius: 9px; } }

  I only recently learned CSS and Bootstrap so I don't know if this is the optimal way of doing things but it worked for me. Hope this helps..

  1

  ---

  

  Dion•80

  @Dion-RPosted over 2 years ago

  @SanePie thank you very much. I just did this on another project and it is working wonders. :)

  1

  

  Achintya Keskar•40

  @SanePiePosted over 2 years ago

  @Dion-R You're Welcome :)

  0
• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾 Hello Dion, congratulations for you new solution!

  Answering your question:

  To allow your card to change the image depending of the device you can do it in two ways: media query or using the <picture> tag.\

  With picture:

  <picture> <source media="(max-width:650px)" srcset="./img/image-product-mobile.jpg"> <img src="img/image-product-desktop.jpg"" alt="product" style="width:auto;"></picture>

  With the media query, you've to work with background-image, not that you've used <img> so for the media query you'll need an empty div with some class to manage inside the css, the best way for this challenge is use the <picture>.

  @media (max-width: 650px) { img {background-image: url (./img/image-product-mobile.jpg) }

  Hope to help you with that, happy coding!

  1