Reesponsiveness withnGrid and it's templates.

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hello Nathaniel Abolarin, congratulations for your new solution!

  Congrats for the amazing grid layout you build, I've some tips to help you improve it bro:

  To align the body you need to remove the position relative and add display: flex; align-items: center; justify-content: center; flex-direction: column; min-height: 100vh;

  body {
      min-height: 100vh;
      display: block;
      background: var(--heading-color);
      /* position: relative; */
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      min-height: 100vh;
  }
  
  

  The grid container size is div.container {max-width: 1110px;}

  Improve your semantic by replacing the divs with main and article for the cards. For example the <div> that wraps each card with <article> and the paragraph with the quote with the property tag <blockquote> this way you'll wrap each block of element with the best tag in this situation. Pay attention that <div> is only a block element without meaning.

  👋 I hope this helps you and happy coding!

  Marked as helpful

  1

  ---

  

  Nathaniel Abolarin•650

  @NaythankikPosted about 2 years ago

  @correlucas I'm applying the changes. Thanks for the correction.

  1