Skip to content
Submitted 3 months ago

social-links-profile

Mitchell Quevedo•30
@MitchellQuevedo
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Social links profile
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I´m feeling more confident about box sizing and responsiveness. I learned that in this project can be a Good practice to set a min-height but not set a height so the content can define the height itself.

What challenges did you encounter, and how did you overcome them?

I thought that I should´ve used the element for the links, but that was semanticly incorrect, was the right way.

What specific areas of your project would you like help with?

I think I still need to improve responsiveness.

Community feedback

  • MrLanter•220
    @MrLanterPosted 3 months ago

    Hi, this is a nice project! I think I have the solution to your responsive problem.

    You have defined a min-width for the card. Only for mobile versions that will be below the value of this property, the width will not adapt. Solution: Use a width fix: width: 350px which should adapt with modern browsers or rather width: 80% for better accessibility.

    I noticed that you are using rem for font sizes, but it seems that you might have missed applying it to the links?

    For the CSS reset I would rather advise targeting all elements with * rather than doing it in <body> because some elements like <h1>, or <p> do not adapt and remain with the browser's default values ​​for margin and padding.

    * {
  margin: 0px;
  padding: 0px;
  font-size: 1rem;
}

    Using min-height for the card can be visually good at the beginning of the project, but at the end it is better to remove it. If the user sets his text size to very small (which is very rare), there is too much space and that could bother the user. You could try by going to the browser settings to see.

    And I would like to ask you if it is intentional to have left spaces in the html or if it is just a bug for me? I would advise you not to put too many to make the code more readable.

    I hope this was useful to you, good luck

    0
    Mitchell Quevedo•30
    @MitchellQuevedoPosted 3 months ago

    Thank you so much, that was helpful. @MrLanter

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord