Product preview card component HTML CSS

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  Add the alt attribute alt= " " to the img tag to fix the accessibility issues. the value of the alt is the description of the image.

  Use rem or em as unit for the padding, margin, width and preferably rem for the font-size for more on CSS units click here

  To center align canceled price with the sale price, add display: flex; align-items: center and gap: 10px to # desc instead position relative and it properties.

  In the media query, there is no need to give the main a height value , give . text a padding value for all the sides, this a good replacement of that and more responsive choice. Give .text and .img a width of 50% instead of a fixed width values.

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  1

  ---

  

  Vanglepu•40

  @VanglepuPosted almost 2 years ago

  @Hassiai Hi Thank you for the Feedback! I just updated my code. I have a question, what canceled price with the sale price mean?

  0

  

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  @Vanglepu canceled price is 169.99 and sale price is 149.99 sorry i did not use the class name you gave to them to reference them. Am very sorry for that.

  0

  

  Vanglepu•40

  @VanglepuPosted almost 2 years ago

  @Hassiai It's okay, thank you for the clarification.

  1