product-preview-card-component-main-challenge

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  Replace <div class="core-div"> with the main tag, <h3> with <p> and <div class="attribution"> with the footer tag to fix the accessibility issues. for more on semantic html visit https://web.dev/learn/html/semantic-html/

  To center a content on a page using flexbox, add min-height:100vh; to the body. instead of giving the body a margin value. There is no need to add flex-direction: column; to the body.

  Increase the padding left and bottom value for .btn-add-to-cart

  Use rem or em as unit for the padding, margin, width and preferably rem for the font-size for more on this watch this https://youtu.be/N5wpD9Ov_To

  Hope am helpful Happy coding

  You forgot to add a media query for the mobile design.

  1
• 

  Favour•2,160

  @Nadine-GreenPosted almost 2 years ago

  HEY BOHDAN!

  I noticed that a mobile design was not included in your solution, to ensure a good user experience, it is good practice to have a mobile design as well as a desktop design, you will need to address this.

  Instead of using a div for the <div class="attribution">, you should opt for a more semantic element like footer which will remove the error on your accesibilty report.

  HOPE I COULD BE OF HELP :)

  HAPPY CODING!

  1