Interactive social link profile using CSS flexbox

Community feedback

• 

  Svitlana Suslenkova•5,320

  @SvitlanaSuslenkovaPosted 2 months ago

  Remove flex from you main and put it to the body with changes:

  body { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; } Try this to align(top-bottom) and justify(left-right) your project to the center. It applies to the parent component(body), don't forget about min-height. You can use grid instead of flex too(with some changes).

  Hope you found this comment helpful :)

  Marked as helpful

  1
• 

  T

  Grace•31,070

  @grace-snowPosted 2 months ago

  I recommend you follow the flex column approach to centering along with min-height: 100svh on the body (the body is only as tall as it's content by default).

  More important than that though, is getting the HTML right on this! This should be a list of links (not buttons - because these would navigate somewhere) and these need to be within an unordered list of list items.

  This is a really important skill to master — translating a design into the most appropriate meaningful html elements for the content. Don't skip learning and putting that into practice. It's the biggest single thing you can do to build accessible solutions.

  Marked as helpful

  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 😁😊😉

  Marked as helpful

  0

  ---

  

  T

  Grace•31,070

  @grace-snowPosted 2 months ago

  Hi @MikDra1, Great feedback! Just a small suggestion to recommend that max width is in rem instead of px. This will make the layout adjust better for those of us who set a different default text size because it will scale right along with our preference. (It avoids the possibility of huge text in a narrow container).

  Marked as helpful

  0

  

  MikDra1•6,920

  @MikDra1Posted 2 months ago

  @grace-snow

  Yeah I know it is just to show what you can do. You always can change things around 😊

  0
• 

  Quang Thoai Vu•70

  @vuthoai02Posted 2 months ago

  I think you should center the main part, nice project.

  Marked as helpful

  0