Responsive social-links-profile using HTML & CSS

Community feedback

• 

  Adriano•38,250

  @AdrianoEscarabotePosted 22 days ago

  Hello sediqa, how are you? I was really pleased with your project, but I’d like to offer some advice that might help:

  Using Flexbox or Grid on the body to center elements ensures a more responsive and adaptive layout, fitting different screen sizes seamlessly. It avoids manual calculations and constant adjustments needed with margin, padding, or absolute positioning. These techniques provide more consistent alignment and simplify the code.

  flexbox:

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

  grid:

  body {
      display: grid;
      place-content: center;
      min-height: 100vh;
  }
  

  The rest is spot on.

  Hope it’s helpful to you. 👍

  0

  ---

  

  sediqa•150

  @Hasani-SediqaPosted 22 days ago

  Hello @AdrianoEscarabote,

  Thank you very much for your solution. But still have this problem with all my code! I used these properties for body but it didn't work the way I wanted! :

  body{ display: flex; align-items: center; justify-content: center; }

  To center elements in the body should i use also Flixbox for container? or margin-top?

  0

  

  Adriano•38,250

  @AdrianoEscarabotePosted 22 days ago

  @Hasani-Sediqa To resolve this we can do the following:

  .card {
      /* margin: 100px; */
  }
  

  we have to remove the margin from the card, and add min-height: 100vh; in the body

  Marked as helpful

  0
• 

  Opara Kelechi•50

  @riskymindPosted 23 days ago

  Cool

  0