Product Preview Card

Community feedback

• 

  P

  Toba•190

  @tobaojoPosted 11 days ago

  Looks really good, I think you could benefit from using gap or some padding for your text content. Also It's not responsive. Perhaps try looking at the mobile design provided to get some ideas on how you can make this component responsive.

  Some other pointers:

  The path to the Montserrat font file has a typo: tff should be ttf.

  font-family should be used instead of font-style for applying custom fonts.

  The card width is currently set to 35% of the viewport. While this works on large screens, it may look overly wide on some smaller screens. Adding a media query can make it more responsive

  Your image styling is mostly good, but adding object-fit: cover instead of contain will prevent empty spaces within the image box if the aspect ratio differs

  Ensure text inside the button isn’t wrapped in a <p>, as it’s semantically incorrect and may affect accessibility.

  The min-width and max-width properties of .card may benefit from further tweaking, especially if targeting devices smaller than 340px.

  Marked as helpful

  0

  ---

  

  Emanuel Barcenas•100

  @eman2point0Posted 10 days ago

  @tobaojo I'm still getting used to working with media queries but thanks for the advice!

  0