Responsive Product Preview Card [Picture Element, Flexbox]

Hello Manuel, congratulations for your solution!

I didn't get your question, I saw your solution and the picture is working normally. I don't think you'll have problems using this tag at this point almost all browsers fully supports the element. You'll problems only with outdated browsers, but I think this will happen only in minor cases.

You can check the <picture> compatibility here: https://www.w3schools.com/tags/tag_picture.asp

About your solution, there's only one aspect I think you can think about fixing, using max-width instead of width, if you check your solution, after the page become mobile, when it reach width 300px the card has the width fixed and doesn't behave as flexible box.

I hope it helps you bro, keep it up!

Hi Manuel, yes, I was able to use the picture element for this challenge, and it turned out fine for me on Firefox and Firefox Developer. You can check out my solution here: https://www.frontendmentor.io/solutions/card-component-using-cube-css-tNaBY0y_Nx

I also used it in another project I had built with React: https://www.frontendmentor.io/solutions/intro-section-with-dropdown-nav-built-with-react-using-vitejs-YegOSGfTJ_

I just had a look at your code; if you're having issues, it might be because of the way the 686w width markers that are in srcset; the way it's written is a bit different than using one <img> tag with different sources. Try deleting the 686w and 600w and see whether it helps. You also don't need the width attribute in the <img> tag.

Good luck, hope this helps!