VS Code, No Figma, Single Product Image, CSS Background, Responsive

I think i'm getting what you were trying to do with the img, however as far a I know whatever img you put in the img tag will display by default meaning if you put both mobile and desktop images will display at the same time therefor in that case you would only have to set display none to the mobile one and in the media query, you would only need to reverse it, i mean set display none to the desktop and display block to the mobile in order for the latter to be displayed when the screen size is a mobile size.

this was the first challenge I did and it wasn't that good with responsive layout, but recently I have done another one that has both mobile and desktop img and it was a pretty good challenge.

Anyway, I hope it helps you!

Hi Matthew, great job!

Yeah, It exists the picture tag for contain multiple source for an img tag. Also, you can define the condition setting the media attribute. Here an example:

<picture>
  <source media="(width <= 465px)" srcset="./images/image-product-mobile.jpg">
  <img src="./images/image-product-desktop.jpg" alt="Product desktop image">
</picture>

Hi, dear, it's a great piece of nicely written work. I can't write like you either. But you missed the hover effect on the button. I believe this happened without your knowledge. I hope you improve your learning and writing skills. Good luck to you