Product Preview Card Component

Community feedback

• 

  P

  Nikitossik•370

  @NikitossikPosted almost 2 years ago

  Hey, good job

  Actually I'd like to give you some improvements:

  • on 400px breakpoint the image is not responsive, you can use max-width: 100% to fix this
  • instead of using ::before element you can use picture tag to change the path to image on different breakpoints

  Good luck!

  1

  ---

  

  Shchetkov Maksim•470

  @ArmsAndArrowsPosted almost 2 years ago

  @Nikitossik Thank you for great advices! I didn't find out how to change path to alternate picture in picture tag, It would be great if you could suggest any docs in that case. Appetiate it!

  0

  

  P

  Nikitossik•370

  @NikitossikPosted almost 2 years ago

  @ArmsAndArrows I hope this code below is what you ask for:

  <picture>
    <source srcset="mdn-logo-wide.png" media="(min-width: 600px)" />
    <img src="mdn-logo-narrow.png" alt="MDN" />
  </picture>
  

  You just add a <source> inside <picture> to add an alternative image for another screen and in media you type a breakpoint you need

  Marked as helpful

  0

  

  Shchetkov Maksim•470

  @ArmsAndArrowsPosted almost 2 years ago

  @Nikitossik totally new tag for me, thx!

  0

  

  P

  Nikitossik•370

  @NikitossikPosted almost 2 years ago

  @ArmsAndArrows you're welcome)

  0