Responsive product preview using flexbox and media queries.

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  Hi Mohieb, I think you did a great job here! About your question, I think using picture is a doable way, certainly much better than using display: none to toggle between the mobile and desktop views, and I've also used picture many times as well for just switching between different sized images. Having said that, picture is more appropriate for switching different types of media, not just for size switching. If it's just for size switching as in this case, you can try just using an img like this with srcset (which is also used in picture):

  <img alt="CHANEL perfume bottle" 
      srcset="image-product-desktop.jpg 600w, image-product-mobile.jpg 686w" 
      sizes="(min-width: 573px) 600px, 686px" 
      src="image-product-mobile.jpg">
  

  Hope this answers your question, and once again, great job!

  Marked as helpful

  0