Product Preview Card Solution using grid

Community feedback

• 

  Adeola Ganiu•1,320

  @Deolabest

  Posted about 2 years ago

  Hey , Congratulations on completing this challenge!

  Here is my feedback:

  • You're using the span element too much.

  • Use <main> instead of a simple <div> to improve the semantics and accessibility on the page. Remember that every page should have a <main> block and that <div> doesn't have any semantic meaning.

  To answer your questions.

  *1. The Add to Cart text and icon are both in the button. Just put them in it like this:

  <button class="btn" type="button"><img src="images/icon-cart.svg" alt="">Add to Cart</button>

  Then you can give the img some margins to create space.

  *2. For the smaller old price, you have to make sure both prices are under one parent elements. i.e.

  <div class="prices">
  <strong>$149.99</strong>
  <p class="original-price">$169.99</p>
  </div>
  

  Then use this CSS:

  .prices {
  display: flex;
  margin: 20px;
  }
  
  strong {
  font-size: 2rem;
  margin-right: 15px;
  }
  
  .prices p{
  font-size: 0.8rem;
  margin-top: 12px;
  }
  

  *3. Already answered in the first question.

  Keep doing a good job!

  00

  Marked as helpful
• 

  MuhammadZaidKhan•40

  @MuhammadZaidKhan

  Posted about 2 years ago

  Congratulations on completing the task. You can center the old price using padding-left and enter your desired value. For the icon, you can add a separate class to the icon image and then select that class separately for the icon and use margin-left. I hope this helps, and you can also look at my or other people's solutions for more clarification.

  00

  Marked as helpful
• 

  Paul Adekomi•550

  @Paul-Adek

  Posted about 2 years ago

  Good job 'EINAR , Concerning the cart image, you can use flex property (CSS)

  display: flex;
  align-items: center;
  justify-content: center;
  }
  button img {
  width: fit-content;
  margin-right: 5px;
  }
  

  and HTML

  <button><img src="images/icon-cart.svg" alt="image">Add to Cart</button>
  

  I'll say that you should learn more about CSS flex property I hope this helps. Happy Coding.

  00

  Marked as helpful