Social links profile solution

Community feedback

• 

  Svitlana Suslenkova•5,320

  @SvitlanaSuslenkovaPosted 2 months ago

  You have <main> and <div class="container">. You don't need two, just one is fine. Also when you want to align project to the center with flex or grid add min-height: 100vh; As now your aligns everything to the center of it's height, not to the center of your view. Hope you found this comment helpful :)

  0

  ---

  

  RajanCP•90

  @RajanCPPosted 2 months ago

  @SvitlanaSuslenkova Hi Svitlana, I only added <main> since someone earlier said it is semantically correct to include it but I agree with you.

  Also, wouldn't using "min-height:100vh" stretch the container to the full height of the viewport which looks odd. Am I adding this in the wrong place?

  0

  

  Svitlana Suslenkova•5,320

  @SvitlanaSuslenkovaPosted 2 months ago

  @RajanCP you have max-height not to stretch anything too much

  0

  

  RajanCP•90

  @RajanCPPosted 2 months ago

  @SvitlanaSuslenkova Sorry I think I don't understand.

  0

  

  Svitlana Suslenkova•5,320

  @SvitlanaSuslenkovaPosted 2 months ago

  @RajanCP you have to add flex to the parent component. It's the component inside which you want to center your project. Try:

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

  Marked as helpful

  0

  

  RajanCP•90

  @RajanCPPosted 2 months ago

  @SvitlanaSuslenkova Yes, that appears to have kept it centred regardless of whether I zoom in and out. Sorry to ask again, but why does the min-height: 100vh keep it centred? How would you say what the code does in plain English.

  0

  

  Svitlana Suslenkova•5,320

  @SvitlanaSuslenkovaPosted 2 months ago

  @RajanCP your project was centered before min-height: 100vh; The problem is that it centers to it's height and it's height is not full height of the screen, but the height of your content.

  1

  

  RajanCP•90

  @RajanCPPosted 2 months ago

  @SvitlanaSuslenkova I see, thank you

  0
• 

  MikDra1•6,920

  @MikDra1Posted 2 months ago

  I encourage you to use this technique to make the card responsive with ease:

  .card {
  width: 90%;
  max-width: 600px;
  }
  

  On the smaller screens card will be 90% of the parent (here body), but as soon as the card will be 600px it will lock with this size.

  Also to put the card in the center I advise you to use this code snippet:

  .container {
  display: grid;
  place-items: center;
  }
  

  Hope you found this comment helpful 💗💗💗

  Good job and keep going 😁😊😉

  0

  ---

  

  RajanCP•90

  @RajanCPPosted about 2 months ago

  @MikDra1 Thank you for the response! Will keep this in mind

  0
• 

  Babalo Nogqala•30

  @babalonogqala23Posted 2 months ago

  great work it is kind of hard to make something pixel-perfect but you did very well.

  0

  ---

  

  RajanCP•90

  @RajanCPPosted 2 months ago

  @babalonogqala23 Thank you, use I don't have access to figma files

  1