Product preview card with flex box

Community feedback

• 

  Sebastian•110

  @AbestianPosted about 12 hours ago

  Hello @Afong, I really like your solution, great job!

  I've tested it on live server, glanced through your code and this is what I came up with:

  • The card is an exact match to the design, I love it
  • Hover effect is great, but I would recommend adding a transition for the background color (e.g. background-color 0.3s) to make the change smoother
  • Card is responsive, you could change the breakpoint for desktop view though. At current 1440px I think it's just a little too far
  • You used rems for some properties, and it's great! You should also include ems in the future, as rems is typically recommended for font-sizes and ems for the rest of properties. A quick video from Kevin Powell should explain it well CSS em and rem explained
  • There's no cursor: pointer property applied to the button, which can be confusing for users
  • You should avoid setting card sizes (height, width) in pixels, doing this can break responsiveness of your card, it's better to use percantages or vw (or to leave it all and let the content or grid/flexbox dictate it's size)
  • It's not visible here, on frontend mentor slider, but when I opened live site I had seen a white line under the image on the desktop version. To fix it, you could add height: 100% property to the desktop media query to ensure that the image fills its container properly

  That's all from me, I hope my review will help you (and also I hope it doesn't look too harsh!)

  Marked as helpful

  1

  ---

  

  Afong•50

  @AfonguwuPosted 22 minutes ago

  @Abestian I fixed my work by following your suggestion. Thanks for your thoughtful effort, I learnd a lot💐

  0