section social links responsive prifile

Community feedback

• Account deleted

  Hey, @ArijTrad! Here are a few suggestions that you might find helpful:

  1. CSS Improvements:

  • Remove all: unset on <p> Tags:
    • The all: unset rule is very powerful and can reset all styles, including some that you may want to keep (like inherited font-family and color). It's better to unset only the specific properties you want to override.

  2. Accessibility:

  • Add aria-labels or Descriptive Alt Text:
    • Ensure your links and images have clear aria-labels or alt text for accessibility.

  3. HTML Structure:

  • Use <article> Instead of <section>:
    • Since the profile card is a standalone component, consider using the <article> element instead of <section>.

  Overall, the project looks fantastic, especially with the use of CSS variables and Flexbox. I hope you find this helpful. Great work!

  0

  ---

  

  ArijTrad•50

  @ArijTradPosted 3 months ago

  thank you so much @weldu0 !

  • as for all:unset on <p> tag, won't it be easier unsetting everything while the styles applied will still be inherited thanks to speceficity
  • also can u advise me on how to perfection the flexbox, especially vertically since it is not as in the example

  0

  Account deleted

  To center the content (within the body) vertically, you can use something like this:

  body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;  /* Take full viewport height */
  }
  

  3. justify-content: center;: This centers the items vertically along the main axis (since the direction is column, the main axis is vertical).

  4. align-items: center;: This centers the items horizontally along the cross-axis (which is horizontal in this case).

  5. height: 100vh;: This ensures that the flex container (the body) takes up the full height of the viewport, allowing the content to be truly centered. This makes the centering responsive to different screen sizes.

  Finally, remove the margin from the .main-container, and if you want to avoid scrollbars, you can set overflow: hidden (though it's not always best practice). @ArijTrad

  Marked as helpful

  0