Responsive landing page using CSS Grid.

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  Replace <div class="conteudo"> with the main tag to fix the accessibility issues. click here for more on web-accessibility and semantic html.

  To center .conteudo 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.

  To center .conteudo on the page using flexbox:
  body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  }
  

  To center .conteudo on the page using grid:
  body{
  min-height: 100vh;
  display: grid;
  place-items: center;
  }
  

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  1
• 

  Villo•190

  @VilloKodeHodePosted almost 2 years ago

  Looking at your solution I with Devtools -> device toolbar you see that the card isnt centered as it should be. Try looking over it again and figure it out.

  There might be an issue with this code: font-size: 62.5%;. If you wanted a resposive text-size would it not be better to just set them with media queries?

  Also: to make the image centered maybe try something like 100vh on the body tag. You can also try adding flex and try to center the component inside of the body tag then.

  Marked as helpful

  1