Respnsive grid challenges using css

Community feedback

• 

  Adriano•42,870

  @AdrianoEscarabote

  Posted over 2 years ago

  Hello altacis, how are you? Welcome to the community of front-end mentors! I truly loved your project's outcome, however I have some advice that I hope you'll find useful:

  To align some content in the center of the screen, always prefer to use display: flex; it will make the layout more responsive!

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

  I noticed that in higher resolutions the content is stretching a lot and this is harming the design of the project, to fix this in a simple way we can use a max-width.

  .container {
      height: auto;
      max-width: 1440px;
  }
  

  The remainder is excellent.

  I hope it's useful. 👍

  11

  Marked as helpful
• 

  Divine Obeten•2,415

  @Deevyn9

  Posted over 2 years ago

  Hi Altacis, congrats on completing this project, it looks wonderful. However, here as some key takeaways you can work on to make it better:

  Firstly about the color, for the background you're to use hsl(210, 46%, 95%) instead of hsl(0, 0%, 81%)

  Also, the container isn't centralized on vertically, to make it centered, you should add display: grid; and place-items: center; to the body tag.

  I hope this comment helps you achieve what you want.

  Happy Coding! 🎉

  10

  Marked as helpful