Product preview card component main

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello Shane, congratulations for your new solution!

  Your product card is really good done, there's not much to say about it, you did a good job putting everything together, but if you want to improve it a little bit more, you can maanage the product image inserting the tag <picture> to wrap both desktop and phone images together in the same tag, and render each image depending of the device (phone / computer) by the settings for the width you'll insert in the html.

  Heres a guide to use picture https://www.w3schools.com/tags/tag_picture.asp

  Something you need to fix is the card responsiveness using max-width to make the container contract and scales with the screen.

  👋 I hope this helps you and happy coding!

  Marked as helpful

  1

  ---

  

  P

  Shane Pinder•190

  @ShanePinderDevPosted about 2 years ago

  @correlucas

  Thanks very much for this!

  I thought there must be a better way to deal with the issue of different pictures for the desktop and mobile screens. I will have a look at the picture link that you included.

  I will also have a look at the card responsiveness issue.

  1

  

  P

  Shane Pinder•190

  @ShanePinderDevPosted about 2 years ago

  @correlucas I've amended the html to use the picture element and I've also amended the css to use max-width. Thanks again!

  1

  

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  @ShanePinderDev Happy to hear that works Shane, I'm looking forward to see your next challenges. Keep it up!

  0