Product Preview Card Component using HTML, CSS - Flex and Media Query

Community feedback

• 

  Abdulqudus Sanusi•500

  @qudus2019Posted about 2 years ago

  Congratulations on your solution Michael, Another way to change pictures without using media queries is by using the <picture> element.

  Read on picture element here

  Marked as helpful

  0

  ---

  

  Michael Le Blanc•20

  @White-WalnutPosted about 2 years ago

  @qudus2019 Thank you for the comment. :) I'll check it out.

  0
• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hello MICHAEL LE BLANC, congratulations for your new solution!

  Answering your question:

  You can manage the product image inserting the tag <picture> to wrap both desktop and mobile images together in the same tag, and render each image depending of the device (phone / computer) by the settings for the width you'll insert in the html

  If you're not familiar with the picture tag you can look at the documentation to see how to set it: https://www.w3schools.com/tags/tag_picture.asp

  👋 I hope this helps you and happy coding!

  Marked as helpful

  0

  ---

  

  Michael Le Blanc•20

  @White-WalnutPosted about 2 years ago

  @correlucas Thank you so much for taking the time to answer. I will check it out. I found this as a solution while trying to figure out how to do it but for some reason I thought the picture tag to be more complicated.

  1