Flexbox

Community feedback

• 

  Ayjamal•630

  @ay-jamalPosted 10 months ago

  display: flex; justify-content: center; align-items: center; background: #D5E1EF; height: 100vh;

  will do the job for you

  Marked as helpful

  0

  ---

  

  P

  Alexandre Oliveira•10

  @Ale557333Posted 10 months ago

  Thank you @ay-jamal !! Working now!

  0
• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 10 months ago

  Hello @Ale557333!

  Your project looks great!

  I noticed that you used lots of padding to place the card in the middle of the page. Here's a very efficient (and better) way to center the card:

  • Apply this to the body (in order to work properly, don't use position or margins):

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

  • Also, in order to make your HTML code more semantic, use <main> for the main container and <h1> fot the title.

  📌 These tag changes may have little or no visual impact but they make your HTML code more semantic and improve SEO optimization as well as the accessibility of your project.

  I hope it helps!

  Other than that, great job!

  Marked as helpful

  0

  ---

  

  P

  Alexandre Oliveira•10

  @Ale557333Posted 10 months ago

  Thank you so much! I learned too much from your comment!! I'll repost my update today! @danielmrz-dev

  1