My completion of the 3-column preview card component -- HTML & CSS.

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  Replace <div class="grid-container"> with the main tag to fix the accessibility issues.

  You forgot to give the body a background-color. To center .grid-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. and give .grid-container a width value and grid-template-columns: 1fr 1fr 1fr; there is no need for a grid template row in the desktop design this will prevent the content from overflowing.

  body{
     background-color: hsl(smoke white)
    min-height: 100vh;
  display: grid;
   place-items: center;
  }
  for the desktop design:
  
  .grid-container{
   width: 900px;
  grid-template-columns: 1fr 1fr 1fr;
  }
  

  You forgot to add a media query for the mobile design , in the media query change the width of .grid-container, change the value of the grid-template-columns to 1fr and add grid-template-rows to it. e.g. asign each grid item to each row

  @media (max-width: 500px){
  .grid-container{
    width: 300px;
   grid-template-columns: 1fr
  grid-template- rows: auto auto auto;
  }
   sample assignment of each grid-item to row
  .grid-luxury{
   grid-row: 3;
  } 
  }
  

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

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  0
• 

  john•90

  @johnhaabPosted almost 2 years ago

  not sure why it looks like that in the preview it looks fine on the website its hosted on?

  0