HTML/CSS for layout, style & responsive. Javascript for interactive.

Community feedback

• 

  Daniel 🛸•44,250

  @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 super efficient 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!

  0

  ---

  

  tgodo•50

  @tobiekwePosted 4 months ago

  Hi@danielmrz-dev, I am super excited for your feedback. Many thanks.

  1
• 

  Krushna Sinnarkar•1,100

  @krushnasinnarkarPosted 4 months ago

  Hi @tobiekwe,

  Your solution is great and well-structured! However, here is some suggestions:

  Centering the Card in the Main Element: Adding height and align-items: center to the main element ensures the card is centered both vertically and horizontally.

  main {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 2rem;
      height: 100vh; /* Ensures full height and centers the card */
  }
  

  Summary By adding align-items: center and height: 100vh to the main element, you can ensure that the card is perfectly centered in the viewport. This change enhances the layout's visual appeal and improves the user experience by making the content more accessible and aesthetically pleasing.

  Feel free to reach out if you have more questions or need further assistance.

  I hope you find my feedback valuable, and I would appreciate it greatly if you could mark my comment as helpful if it was!

  0

  ---

  

  tgodo•50

  @tobiekwePosted 4 months ago

  Hi@krushnasinnarkar, Thanks for the feedback. I really appreciate.

  0