Product preview card component

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello Rob, congratulations for your new solution!

  Wow! Great solution and great design, pixel perfect😱😱 this is amazing considering it's only your second solution. Well done! Something you can do to improve the image that needs to change between mobile and desktop is to use <picture> instead of <img> wrapped in a div. Look that for SEO and search engine reasons isn’t a better practice import this product image with CSS since this will make harder to the image be found. You can manage both images inside the <picture> tag and use the html to code to set when the images should change setting the device max-width depending of the device (phone / computer) Here’s a guide about how to use picture: https://www.w3schools.com/tags/tag_picture.asp

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  1

  ---

  

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  @correlucas Wow, I only saw your comment after I wrote mine (around the same time!) and we wrote pretty much the same thing 😂 🙌

  0

  

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  @elaineleung indeed I was thinking about your solution when I saw how close it was from the solution screen pixel perfection, everytime I something like this I feel me a loser because my solution are too far from pixel perfection 😂

  0

  

  Rob Meijer•100

  @robmeijerPosted about 2 years ago

  @correlucas Thanks, that's really helpful! I was wondering how I could use different images for different breakpoints, but opted for a background image instead. I'll give <picture> a try.

  1
• 

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  Hi Rob, this looks really great, and I think your solution is pretty close to the original design, so great job! The responsiveness is also well done. Anyway, I think the one suggestion I can offer here is regarding the image; I can see that you've used background-image here (by the way, on a smaller screen size there's background-repeat going on and it's being duplicated). I would recommend using a responsive image in the HTML with either img or picture as this photo is really central to the product and it isn't really a background image, and this can be helpful for screen readers. Other than that, probably I'd also suggest changing height:100% on the body to min-height: 100vh, so that on a smaller browser height, the content won't be cut off by the window.

  Great work overall, and yes, the mobile first approach is the way to to go!

  Marked as helpful

  0

  ---

  

  Rob Meijer•100

  @robmeijerPosted about 2 years ago

  @elaineleung Thanks so much Elaine! I appreciate you taking the time to offer feedback. I'll definitely look at using the <picture> element to solve this.

  1