Product Preview Card – Clean, Responsive, Semantic HTML + CSS

Community feedback

• 

  Abdul Subhan•1,580

  @Esabdul

  Posted about 1 month ago

  The height of .products on mobile, you have switched from 100vh to 100%, which might cause layout issues on some devices, especially if content overflows vertically.
  It might be worth revisiting how height is handled across breakpoints or using min-height with a padding-bottom to ensure breathing room.

  Also, while your typography is generally strong, having html { font-size: 14px; } globally might clash if you want to reuse this setup in larger-scale projects where users expect the default 16px base.
  Maybe consider scaling elements with rem so it becomes easier to tweak sizes without rewriting everything.

  Lastly, one small accessibility tip, it’s good practice to add a type="button" to buttons that don’t submit forms, just for clarity.

  Your button is currently set to type="submit", but if it’s not actually submitting anything, switching to type="button" might make more sense.

  01

  Marked as helpful