Responsive QR Code Page

Community feedback

• 

  Atef Khaled•80

  @atefkhaled7Posted 8 months ago

  Great job on completing your first project on Frontend Mentor! It’s an exciting milestone, and I appreciate your effort. 😊

  Now, let’s address the issue you faced with centering a <div>. Centering elements can be tricky, especially when you’re just starting out. Here are some suggestions to improve your code:

  Centering Elements:

  1. Consider using Flexbox or Grid for more consistent results.
  2. For horizontal centering, use justify-content: center; (Flexbox) or place-items: center; (Grid).
  3. For vertical centering, use align-items: center; (Flexbox) or place-items: center; (Grid).

  CSS Reset: Consider using a CSS reset to remove default browser styles. This ensures a consistent starting point for your styling. EX: *{ margin: 0; padding: 0; box-sizing: border-box; }

  You should add it first thing in the CSS file using the universal selector *{ } OR add it to the body { }

  Remember, practice makes perfect! Keep experimenting, learning, and building more projects. Happy coding! 🚀

  Marked as helpful

  1

  ---

  

  meher-hex•20

  @meher-hexPosted 8 months ago

  @atefkhaled7 Thank you so much for your feedback! I've already used CSS Flexbox and added exactly what you suggested. Unfortunately, it never works for me or any other typical solutions. However, this is my first time hearing about CSS reset. Thank you for enlightening me on that. I'll make sure to use it on my next project.

  1
• 

  Daniel 🛸•44,250

  @danielmrz-devPosted 8 months ago

  Hello, @meher-hex!

  Your project is looking fantastic!

  About your question:

  Centering the div. Whenever I use margin: auto or any other common solutions, it sits in the center but not exactly at the middle of the page. It's stuck to the top. That's what I need help with.

  • Using margin isn't always the most effective method for centering an element.

  Here's a highly efficient approach to position an element at the center of the page both vertically and horizontally:

  📌 Apply this CSS to the body (avoid using position or margins in order to work correctly):

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

  I hope you find this helpful!

  Keep up the excellent work!

  Marked as helpful

  1

  ---

  

  meher-hex•20

  @meher-hexPosted 8 months ago

  @danielmrz-dev Hey there! I have used the exact code you suggested except for the min-height property. I'll try using it in my next project. Thank you so much for your feedback!

  1