product card

Hi @yzhuuuu,

Congratulation for successfully completing the challenge...

In your provided code, it seems that you're using min-width for the mobile image and max-width for the desktop image. To clarify:

The min-width media query is used to specify styles for screen widths equal to or greater than the specified value. The max-width media query is used to specify styles for screen widths less than or equal to the specified value.

If you're aiming to show the mobile image for smaller screens and the desktop image for larger screens, you might want to adjust your media queries accordingly. For instance:

-> Show mobile image for screens up to 600px wide:
@media (max-width: 600px) {
  .img-container img {
    display: block;
    max-width: 100%;
    height: auto;
  }
}

-> to show desktop image for screens 601px and wider:
@media (min-width: 601px) {
  .img-container img {
    display: block;
    max-width: 100%;
    height: auto;
  }
}

Hope that could be helpful. Keep happy coding...