Responsive product preview card

Community feedback

• 

  Prantik•660

  @prantiknoorPosted over 2 years ago

  Hey, @maudlinmandrake!

  I had the same issue. It looked good on my browser but the screenshots was weird.

  To solve this issue, you need to do just,

  img {
     /* width: 50%; */
  
    flex: 1 0 50%;
    object-fit: cover;
  
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
  }
  

  (Bonus tip: Use Firefox to inspect. if your solution is good in Firefox, the screenshots will also be good.)

  Marked as helpful

  1
• 

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  Hi Jenny, well done your second challenge, and I like what you did with making your img responsive in the HTML.

  I'm viewing your project on Firefox, and it pretty much looks the way your screenshot does, as in the image is squished to the left. The screenshots are produced when you first submit your solution, and if you make any changes to your code after that, there won't be a new screenshot automatically, but you can update your screenshot if you like after getting it to look close to the original. Members on the free plan get 5 free screenshots each month.

  Just to follow on the advice above, after adding object-fit:cover to your img, you may need to add a flex: 1 to your .product-desc as well. That's telling the browser to make the element grow/shrink depending on the remaining space, and since you already specified a width of 50% in your img, the browser would adjust the width of the other .product-desc accordingly.

  Hope this helps!

  Marked as helpful

  1

  ---

  

  Jenny Mikac•20

  @maudlinmandrakePosted over 2 years ago

  @elaineleung Thanks Elaine, the object-fit:cover did the trick, and I appreciate the extra details about how the flex sizing would work!

  0
• 

  BreinerJT•530

  @BreinerJTPosted over 2 years ago

  Hello Jenny, congratulations on completing this challenge. U need to add object-fit: cover; to your img element, this will fix it. Also, maybe the errors in the shopping cart image are because in your head tag the styles.css are loading first then the styles from font awesome so probably moving the font awesome style tag above the style.css link will fix it.

  Marked as helpful

  1

  ---

  

  Jenny Mikac•20

  @maudlinmandrakePosted over 2 years ago

  @BreinerJT Thank you so much, this did the trick. I didn't realize that there was a cover option for images and always thought it was just for backgrounds, this will be a lifesaver in the future 😅

  0