Responsive Product Preview Card [Picture Element, Flexbox]

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted over 2 years ago

  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!

  Marked as helpful

  0

  ---

  

  Manuel Lucero•140

  @MalexLuceroPosted over 2 years ago

  @correlucas Very helpful. Thanks for the suggesting Lucas!

  1
• 

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  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!

  Marked as helpful

  0

  ---

  

  Manuel Lucero•140

  @MalexLuceroPosted over 2 years ago

  @elaineleung Hi Elaine, thanks for your feedback. You're absolutely right. I did miss the width property on the image tag. I took a look at the project you did in react, and wow. I am blown away. Great job! I have a lot more to learn about the picture element for sure. :)

  1

  

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  @MalexLucero Thanks for the compliment, Manuel! 🙂

  0