responsive product card using flex box

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  Hi Bee, well done completing your second challenge, and I'll try to offer you some help here! I couldn't view your repo at all, so I don't know whether you built this with Next.js or just React, but in any case, with the image, you can try using a picture element for handling responsive images. With the picture element, you'd put the main image in the img tag (basically whatever you used in the main code), and then you'd write a source tag with the media query and also the image that should be changed at that breakpoint. I kind of guessed your breakpoint to be at 650px, and so the whole component looks like this:

  <picture>
     <source srcset="images/image-product-mobile.jpg" media="(max-width: 650px)">
     <img class="product-image" src="images/image-product-desktop.jpg" alt="glass perfume bottle placed with a leafy background">
  </picture>
  

  The CSS would look like this:

  .product-image {
     height: 100%;
     width: 100%;
     object-fit: cover;
     display: block;
  }
  

  For the responsiveness of the card, you have max-width: 600px which is a good start; then for the mobile view, I'd probably use max-width: 400px to make sure it doesn't stretch out too much. I think adding height: 100% and object-fit: cover; should help to make the image fill out the space vertically in the desktop view.

  Let me know if this doesn't work and then we'll troubleshoot some more!

  0

  ---

  

  Bee Horma•170

  @hormakeryPosted about 2 years ago

  @elaineleung i built it on react

  0

  

  Bee Horma•170

  @hormakeryPosted about 2 years ago

  @elaineleung i really appreciate your feedback....I'll revert soon

  0

  

  Bee Horma•170

  @hormakeryPosted about 2 years ago

  @elaineleung i really appreciate your feedback....I'll revert soon

  0