Product Preview Card Component using Flexbox

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted over 2 years ago

  Hello Wardin, congratulations for your solution!

  I'm with your solution live site opened right now and you've done a pretty good work. You did a good job wrapping up all the content inside the container, the card is super flexible and responsive, works perfectly.

  I've two tips for you:

  1. Use the <picture> tag instead of image, this way you can define the mobile and desktop images in this single tag and also set inside the html when the image should change from desktop to mobile.

  2. Your image isn't take the full height of the container, if you look the left column, there's a tiny margin between the bottom and your image. I've checked in Chrome DevTools and this is happening due the height that wasn't set in the img. Just att height 100% to fix it. Code below

  img { height: 100%; max-width: 100%; }

  Congrats for this really well done challenge! Happy coding!

  Marked as helpful

  0

  ---

  

  Alexandru•330

  @WardinulPosted over 2 years ago

  @correlucas Thank you very much!

  1
• 

  romila•3,570

  @romila2003Posted over 2 years ago

  Hi Wardin,

  Congratulations for completing this challenge, it looks great. I did notice some minor issues:

  1. The new price does not have a font-family.
  2. I noticed that you took a desktop-first approach which looks great. It would be best practice to use the mobile-first approach as it would be easier to adjust the elements as you increase the screen size. In the mobile screen, the old price is not aligned properly and looks like it is in the center.
  3. Also, in the desktop version, I noticed that the container is longer than the image therefore there is some white space under the image.

  Overall, great attempt and wish you the best for your future projects.

  1

  ---

  

  Alexandru•330

  @WardinulPosted over 2 years ago

  @romila2003 Thanks for your feedback!

  0