Product Review Card using CSS Grid

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted over 1 year ago

  Replace <div class="container"> with the footer tag to make the content/page accessible. click here for more on web-accessibility and semantic html There is no need to give the body a padding value.

  To center .container on the page using flexbox, add min-height:100vh; display: flex; align-items: center: justify-content: center; to the body

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

  For a responsive content there is no need to give .container, .image , .content and the img a max-height. Rather give .container a fixed max-width value, .image and .content a width of 50% in the desktop design and 100% in the media query for the mobile design.

  Give .content the same padding value for all the sides , this will prevent the content from overflowing on smaller creens and give the img a max-width of 100%.

  Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here and here

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  1