Product preview card with using CSS Flex

Community feedback

• Account deleted

  You did great completing this challenge! 🎉

  The overall design looks identical; however, you can still improve it. Consider removing the background color from .main and setting it in the body.

  Another thing is that you used the property background-image to set the background image and change it in smaller screen. I highly recommend you use the <picture> HTML element. 🖼️ The <picture> element is a bit different than <img>.

  So here is how you can use it:

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

  The above html code tells the browser to use image-product-mobile.jpg if the viewport is less than 600px. If not, then use the default image which in this case is image-product-desktop.jpg.

  If you want to learn more about <picture>, here is greet doc from MDN. 📚

  I hope this helped you. 😊 Happy coding! 💻

  Marked as helpful

  1
• 

  Samiullah•440

  @samir-DevePosted 4 months ago

  Haji You designed it well !! :)

  0