HTML CSS

Community feedback

• 

  Patrick•800

  @PPechmannPosted about 2 years ago

  Hi Leonel!

  Congrats on your solution on this challenge, very nice job getting those articles positioned correctly!

  To improve it a bit, I suggest centering the entire grid properly. You can easily do this using flexbox display on the body. For it to be able to work, you also need to apply a 100vh height to it.

  The code would look like follows:

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

  To get the entire grid width to display nicely on all sizes, I also suggest giving the main section a max-width.

  I recommend getting used to working with em and rem units, as these are relative (not fixed, like px) and will make your code easier to adapt to different screen sizes.

  I hope this helps!

  Happy Coding :)

  Patrick

  Marked as helpful

  1
• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello Leonel, Congratulations on completing this challenge!

  Here's some tips to improve your solution:

  1.ALIGN THE COMPONENT:Make the vertical alignment using flex properties and min-height. First of all put min-height: 100vh to the body to make the body display 100% of the viewport height (this makes the container align to the height size thats now 100% of the screen height) size and display: flex e flex-direction: column to align the child element (the container) vertically using the body as reference.

  @media (min-width: 800px)
  body {
      min-height: 100vh;
      margin: 0px;
      background: hsl(210, 46%, 95%);
      Font-size: 13px;
      display: grid;
      grid-template-columns: 10% 80% 10%;
      grid-template-rows: 150px 80% 20%;
      justify-content: center;
      align-content: center;
      font-family: 'Barlow Semi Condensed', sans-serif;
      justify-items: center;
      align-items: center;
  }
  

  2.Improve your html markup using meaningful tags and replace the important blocks of content with better tags, for example the main div that takes all the content can be wrapped with <main> or section, the cards you can be replaced the <div> that wraps each card with <article> you can wrap the paragraph with the quote with the tag <blockquote> this way you'll wrap each block of element with the best tag in this situation. Don’t use div for the important blocks, ever prefer some tag that shows what its containing the block.

  Here's a complete guide for HTML semantic TAGS: https://www.w3schools.com/TAgs/default.asp

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  1