Product-preview-card-component using Flexbox

Community feedback

• 

  Amal Karim ✅•1,290

  @amalkarimPosted about 2 years ago

  Hi Sayyid 👋

  Congratulations for completing the challenge!

  Why do you feel uncomfortable about the result? It's a great solution! However, let me point out some of the things that could be improved. But this is only my personal view, it's not necessarily the best solution out there.

  • Never give height: 100vh; to the body. When the browser height is less than the content, it will make some parts of the page hidden and we can't scroll to see them. Change it to min-height: 100vh;
  • Add object-fit: cover; to .card__image img to make sure the image isn't squeezed at any given width.
  • Change @media screen and (min-width: 375px) and (max-width: 462px) to @media screen and (max-width: 462px) in order to avoid the page design back to desktop mode when the screen width is less than 375px (though I'm not sure people nowadays using screen less than 375px)

  That's all. Hope this helps. Happy coding!

  Marked as helpful

  1

  ---

  

  Sayyid Widad Alawi•90

  @alawi17Posted about 2 years ago

  @amalkarim Thanks for the feedback! I really appreciate it.

  0
• 

  S MD suleman•3,530

  @sulemaan7070Posted about 2 years ago

  hey, sayyid, for the desktop version your site is good, but it is not mobile-responsive. you can probably use the "flex-wrap" property on certain @media point since, you have already used flex-box

  0

  ---

  

  Sayyid Widad Alawi•90

  @alawi17Posted about 2 years ago

  @sulemaan7070 Thanks for the feedback.

  0