Responsive product preview card

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.)

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!

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.