Simple product card with flex

Community feedback

• 

  Boots 😺•1,590

  @adityaphasuPosted over 1 year ago

  Hey there! Good job on completing the challenge🙌🏻

  One thing you could improve is how you've used absolute positioning for the desktop image. You can use <picture> element for the images instead of absolutely positioning them like this:

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

  Here the srcset is being used for the desktop image URL and the media attribute is being used as a media query as to when the desktop image should show up. Initially, the image will be mobile but as soon as it hits 748px the image will be switched up to a desktop one.

  This will save you from writing all the unnecessary code to absolute position the images.

  📱 The <picture> element is great for responsiveness! Here you can read more about it!

  I hope this will be helpful in your future projects 🙂

  Happy Coding!🕺🏻

  Marked as helpful

  1

  ---

  

  MartinCerman•70

  @MartinCermanPosted over 1 year ago

  @adityaphasu Thank you for this comment. Yeah looks like <picture> is indeed a modern way of inserting responsive images, I'll definitely use it in future projects!

  1
• 

  Carlos Al•200

  @crsaelePosted over 1 year ago

  It looks good.

  You should try putting your css styles in a different file so your code doesn't look as messy.

  Fix your media query :)

  Happy coding.

  1