Product preview card component

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted about 2 years ago

  Hi @penguinzero 👋, good job for completing this challenge and welcome to the Frontend Mentor Community! 🎉

  This is a good solution for this challenge and here are some suggestions you might consider:

  • Try to fix the issues indicated by the report in this solution.
  • The container is not center. There are two modern CSS techniques to center elements instead of margin: auto:

  Using flexbox layout:

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

  Using grid layout:

  body {
     width: 100%;
     min-height: 100vh;
     display: grid;
     place-content: center;
  }
  

  And remove margin: 80px auto; from the card selector.

  More information:

  • The Complete Guide to Centering in CSS
  • A Complete Guide to Flexbox (CSS-Tricks)
  • How TO - Center Elements Vertically (W3Schools) |
  • CSS Layout - Horizontal & Vertical Align (W3Schools).

  .

  • You could use the <del> tag to display the old price:

  <del>$169.99</del>
  

  I hope those tips will help you.

  Good Job and happy coding !

  Marked as helpful

  1

  ---

  

  Robert Zelić•320

  @robertzelicPosted about 2 years ago

  @MelvinAguilar Thank you, I made the changes as you suggested!

  0