responsive product preview card component

Community feedback

• 

  S MD suleman•3,530

  @sulemaan7070Posted almost 2 years ago

  hey Madeleine De Guzman 😄, congratulations on completing the first challenge💯💯 and you really did a nice job... the only drawback is I have inspected your code and.

  1. You have used only image-product-desktop.jpg there is also another image image-product-mobile.jpg for mobile version which you will be able to find in the images folder.
  2. as a good practice the picture element is such cases which is below.

  <picture>
    <source media="(min-width: 650px)" srcset="img_food.jpg">
    <source media="(min-width: 465px)" srcset="img_car.jpg">
    <img src="img_girl.jpg">
  </picture>
  
  

  more about picture element here. in the picture element you will be able to change the images based on media-query and the tag itself can have media-queries inside it. let me know if you need further assistance happy coding🔥🔥

  Marked as helpful

  0

  ---

  

  Madeleine De Guzman•70

  @deguzmanmadeleine22Posted almost 2 years ago

  @sulemaan7070 Thanks for the feedback! I thought the mobile version resources were if I am specifically making it for mobile. Thank you for clearing that one up. I will take note of that for the following projects.

  1
• 

  Madeleine De Guzman•70

  @deguzmanmadeleine22Posted almost 2 years ago

  This is my take on the project. It's my first time creating something without following a video.

  It was created using sass and a bit of bootstrap. I'm open to your suggestions.

  0