Product Preview Card

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

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

  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

  To center .container on the page, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body. instead of giving .container a margin value to center it.

  Increase the width value of .container to 600px. There is no need to five .container a margin value and a padding value

  in the media query give .container a width of 90% instead 1000px and display: block; instead of display: grid and display: flex.

  Hope am helpful HAPPY CODING

  Marked as helpful

  1

  ---

  

  Sagun Shrestha•160

  @SaguneoPosted almost 2 years ago

  @Hassiai

  Notes taken. Thank you for the feedback and resources, those links are definitely going to help me out in the future!

  0

  

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  @Saguneo if you find my comment helpful, mark it as helpful

  0
• 

  Favour•2,160

  @Nadine-GreenPosted almost 2 years ago

  HEY SAGUN!

  I noticed that in the mobile design, you have a problem with centering, a quick fix for this would be the give the body a height of 100vh height:100vh then a display of grid display: grid and then use the code place-items: center.

  Instead of using a div for <div class="footer">, you should use a more semantic element like footer instead.

  HOPE I COULD BE OF HELP :)

  HAPPY CODING!

  1

  ---

  

  Sagun Shrestha•160

  @SaguneoPosted almost 2 years ago

  @Nadine-Green

  Yes! It is my first time doing media queries and centering was a major obstacle in mobile design. Thank you for the centering advice, will implement it on my next project!

  0

  

  Favour•2,160

  @Nadine-GreenPosted almost 2 years ago

  @Saguneo

  Glad I could be of help :)

  0