social-links-profile-main

Community feedback

• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 9 months ago

  Hello @a1031748!

  Your project looks great!

  I have one suggestion for you to improve it even more:

  • Using position: absolute is not the best option to center an element. It can cause bugs and may result in part of the contenet being cut off on smaller screens.

  Here's a very efficient (and better) way to place an element in the middle of the page both vertically and horizontally:

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

  body {
      min-height: 100vh;
      display: flex;  /* it works with grid too  */
      justify-content: center;
      align-items: center;
  }
  

  I hope it helps!

  Other than that, great job!

  Marked as helpful

  0

  ---

  

  a1031748•40

  @a1031748Posted 9 months ago

  @danielmrz-dev Thanks ~ Your comment helps me a lot.

  1
• 

  Sefa•190

  @sefaonderPosted 9 months ago

  Hello @a1031748 Thank you for sharing your solution with us.

  You did a nice job and I liked it.I just want to mention a few small details:

  1.When using colors, you used the colors given in the design. This is very nice, but instead of using colors one by one, you can define them in the :root selector and use them everywhere in the project with var(). For more :root

  2.You used absolute and margin:auto to center the card. This is a solution, but in this case, you must define all dimensions of the card. This is not a very practical application, especially for different device sizes. You can use flexbox instead.For more flex-box

  Marked as helpful

  0