Responsive Product Preview Card Component

Community feedback

• 

  hitmorecode•6,250

  @hitmorecodePosted about 1 year ago

  The picture element should work just fine, in case you want a work around you can do something like this

  html

  <img id="product-image-desktop" alt="Perfume bottle" src="./Project Requirements/images/image-product-desktop.jpg">
  
  <img id="product-image-mobile" alt="Perfume bottle" src="./Project Requirements/images/image-product-mobile.jpg">
  

  css

  **When on desktop
  #product-image-mobile {
    display: none;
  }
  
  **when on mobile
  #product-image-mobile {
    display: block;
  }
  
  #product-image-desktop {
    display: none;
  }
  

  You don't need to use javascript for this

  2

  ---

  

  Crystal Rose-Wainstock•110

  @crwainstockPosted about 1 year ago

  Thanks so much! @hitmorecode

  I'll give this a try. I know it should be possible without JS, but the html option just wasn't working the way I was doing it.

  I appreciate your help!

  0
• 

  retr0web•250

  @retr0webPosted about 1 year ago

  Hi again Crystal!

  About picture method, were you using media queries to set the source of the image?

  I found it hard to work with picture before, but after doing some research it's a nice way to make responsive image.

  The syntax looks like this:

  <picture>
    <source media="(min-width: 1200px)" srcset="wide-crop.jpg">
    <img src="close-crop.jpg" alt="…">
  </picture>
  

  This method helped me through FAQ accordion challenge.

  Here is a link more about using this method.

  0

  ---

  

  Crystal Rose-Wainstock•110

  @crwainstockPosted about 1 year ago

  Thanks! I tried doing it this way, but it wasn't quite working. Only one image was rendering no matter what the screen size was. I got it working using a similar method to what the previous person commented here.

  I appreciate the help! @retr0web

  1