Responsive social links profile card

Awesome job tackling this challenge! You’re doing amazing, and I wanted to share a couple of suggestions that might help refine your approach…

• You have a font size issue, Using legible font sizes is important because text smaller than 12px can be hard to read, especially on mobile devices, forcing users to zoom in. Aim for more than 60% of your text to be at least 12px or larger. This improves readability, user experience, and accessibility for all visitors.

.user-links button 11.264px
.user-description 11.264px
.user-location 11.1232px

• This does not matter that much at this stage but something to be mindful of for SEO(Search Engine Optimisation), <meta> description tag missing.
• Avoid using just height like this to center vertically,

html, body, main {
    height: 100%;
    font-family: 'Inter', sans-serif;
    font-size: var(--font-size);
}

• Instead center an element, apply margin-inline: auto; this will center it within its container., You can center the height by using this code snippet

  min-height: 100svh;
  display: flex;
  justify-content: center;
  flex-direction: column;

• Using a naming convention like BEM (Block, Element, Modifier) is beneficial because it makes your CSS more organized, readable, and easier to maintain. BEM helps you clearly understand the purpose of each class, avoid naming conflicts, and create reusable components, leading to a more scalable codebase. For more details BEM,
• Using max-width: 100% or min-width: 100% is more responsive than just width: 100% because they allow elements to adjust better to different screen sizes. To learn more, check out this article: responsive-meaning.

You’re doing fantastic! I hope these tips help you as you continue your coding journey. Stay curious and keep experimenting—every challenge is an opportunity to learn. Have fun, and keep coding with confidence! 🌟