responsive design, media queries, html, CSS.

Community feedback

• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 4 months ago

  Hey there! 🙋🏽‍♂️

  Congrats on completing the challenge! ✅

  Your project looks fantastic!

  Here's a tip to make it even better:

  Using margin and/or padding isn't always the best way to center an element. Try this method to center an element vertically and horizontally:

  📌 Apply this CSS to the body (skip position or margins to make it work correctly):

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

  Hope this helps!

  Keep up the great work!

  Marked as helpful

  1

  ---

  

  Itoro (Celine) James•160

  @CelineJamesPosted 4 months ago

  Hey @danielmrz-dev, thanks for the review and encouragement. I had done the above code in my css @body, but it still won’t center vertically, it only centers horizontally. However I noticed you included something different. Which is setting the min-height property, I would try that and see if that works.

  1

  

  Daniel 🛸•44,310

  @danielmrz-devPosted 4 months ago

  @Kaytorah That property is the most important because this method centers the element vertically based on the user's screen height.

  Marked as helpful

  1

  

  Itoro (Celine) James•160

  @CelineJamesPosted 4 months ago

  @danielmrz-dev , Thank you for the suggestion, it worked. I tried it on the second project and it came out closely identical, say 98/100. Thanks a lot. And I’ve gone ahead to study Min and Max width and height values properly.

  1