Product preview card component

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hello Volodymyr Pivtoranis, congratulations for your new solution!

  Great solution and great code! I liked that you've used the picture tag and created this solution with a clean code. I've some tips for you to improve it even more:

  You need to fix the container size that is a bit off, this challenge uses the standard container size that is max-width: 900px.

  To make the image have a better fit inside of it, make the component image responsive with display: block and max-width: 100% (this makes the image fit the column/div size) and respect the component size while it scales down. To make it crop while scaling use object-fit: cover.

  img {
      display: block;
      object-fit: cover;
      max-width: 100%;
  }
  

  You can use relative units as rem or em that have a better fit if you want your site more accessible between different screen sizes and devices. REM and EM does not just apply to font size, but to all sizes as well.

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  1

  ---

  

  Volodymyr Pivtoranis•60

  @PivtoranisVPosted about 2 years ago

  @correlucas Hi Lucas, thank you! It so nice of you to check my code and give me feedback! Definitely will change it.

  1

  

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  @PivtoranisV You're welcome Volodymyr, keep it up and post more challenges! I'll be happy to help u

  1
• 

  Adriano•38,120

  @AdrianoEscarabotePosted about 2 years ago

  Hi @PivtoranisV, how are you?

  I really liked the result of your project, but I have some tips that I think you will like.

  I noticed that the card was not very centered so I made some code changes to solve this.

  I removed these codes that are commented out:

  @media screen and (min-width: 650px) .main { /* margin: auto; */ /* padding-top: 25%; */ }

  And I added these to the body:

  body { min height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; }

  The rest is really good!

  Hope it helps... 👍

  Marked as helpful

  1

  ---

  

  Volodymyr Pivtoranis•60

  @PivtoranisVPosted about 2 years ago

  @AdrianoEscarabote Hi Adriano, thank you for your help? I was really straggling with desktop version Thank you

  1

  

  Adriano•38,120

  @AdrianoEscarabotePosted about 2 years ago

  @PivtoranisV no problem man, have a great day

  Marked as helpful

  1