Responsive social links profile card

Community feedback

• 

  P

  Steven Stroud•11,910

  @StroudyPosted 2 months ago

  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! 🌟

  1

  ---

  

  Alex•120

  @CaplexWPosted 2 months ago

  @Stroudy Wow! Thanks Steven, that was fast! xD I'm still reading through you suggestions from the last comment, but here's one thing. The solution is much smaller then I was expecting. I was planing to make it the same size as the design (or at least close to), and I was comparing it to the desing photo, but JPG and HTML displays diffirently when I open them in a browser, so it went wrong. That's why the font-size so small. Only when I submit the solution I can see on a slider that it's not fit. Maybe you know some 'correct' way to compare solutions to the design?

  1

  

  P

  Steven Stroud•11,910

  @StroudyPosted 2 months ago

  @CaplexW, Not 100% sure what you mean, I use a live server plugin on VScode and I can see the live updates as I am making changes. This really helps, Maby watch a YouTube tutorial to see how it works. I hope this helps, Also if you got PRO you get the Figma file, It has all the information you need on it!

  1