All comments

• 

  Fritz• 300

  @fritzadelbertus

  Submitted almost 2 years ago

  Currently I'm using CSS background property to change the source of the image accordingly. Is there a better way of doing it? Is it better to put supporting icons as an element beside the text or using pseudo css selectors. I'm currently using the ::before to insert the cart icon and wanting to know if that is the optimal solution?

  

  Product Preview Card Component using basic CSS

  3

  50

  

  Maame Yaa Serwaa Bona-Mensa• 70

  @mbonamensa

  Posted almost 2 years ago

  Hey Fritz, Congrats on completing the challenge!

  There is no optimal solution, I think you did a great job!

  For the different images for different screen sizes, it is advisable to use <picture> since the images are an important aspect of the site.

  For example:

  <picture> <source media="(max-width: 375px)" srcset="./img/image-product-mobile.jpg"> <img src="./img/image-product-desktop.jpg" alt="Perfume with green leaf props"> </picture>

  This resource can help you understand better.

  I also think the icons should be placed as images or svgs as well in the HTML, instead of using the pseudo-class selector.

  I hope this helps.

  Happy coding!

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  Ricardo Reyes Flores• 40

  @RREYES0424

  Submitted almost 2 years ago

  I have problems with the responsive design, I don't know how to remove the scroll in the mobile version.

  

  Product preview card component solution

  1

  30

  

  Maame Yaa Serwaa Bona-Mensa• 70

  @mbonamensa

  Posted almost 2 years ago

  Hi Ricardo, well done for completing this challenge!

  Few tips and feedback

  • The live site URL was flagged in my browser as a deceptive site. I think this because of how it is named. Instead of using the names generated by Netlify, you could try renaming the subdomain. For example: instead of regal-tiramisu-0e2998.netlify.app, try product-card-component.netlify.app
  • Use <picture> in rendering the images for the different screen sizes instead of using display: none in your CSS to render them on the screen. Like the code below:

   <picture>
      <source media="(max-width: 650px)" srcset="./img/image-product-mobile.jpg">
      <img src="./img/image-product-desktop.jpg" alt="Perfume with green leaf props">
    </picture> 
  

  • I found that using min-height: 100vh instead of height:100vh and removing the width: 100vw solved the issue with the scroll.

  Happy coding!

  1