Skip to content
Submitted 3 months ago

Social Links Profile - Normal Flow

Alex Wilkom•50
@alexwilkom
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 am proud of the structure of the HTML and CSS. Although that is my view of it, I would always read and listen feedback for improvements.

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

My challenge was one at the beginning: how to correctly displaying the font. I looked up on the internet why the font was not displaying correctly and change the code accordingly.

The other challenge was when I asked for feedback: a frontend mentor user pointed me to the issue I had with the height property on the html and body, and resolved it using min-height: 100svh on the body. That made me to read more about svh and why it is useful.

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

Anything that can be improved or new teachings will always be helpful for me.

Community feedback

  • Grace•31,270
    @grace-snowPosted 3 months ago

    This is a nice solution overall, well done!

    The html is well structured although there's no need to use section with a role of main when you could just use a main element, and it would be better for performance to include the CSS reset at the start of your style sheet rather than forcing an extra asset fetch by linking it as a separate file. Those are both minor things though.

    More important is that this breaks on mobiles or when zoomed. It's caused by this in your CSS:

    html,
body {
    height: 100%;
}

    This causes the content to get cut off at the top of the screen when there isn't room for the content. (For example on small phones, on landscape view or when zoomed in). It's actually why Josh Comeau removed it from his reset a couple of years ago. To fix this, remove that CSS. It's the HTML height of 100% that causes the issue. Instead, use min-height: 100svh and flex column properties to center the component on the screen.

    There's also no need for a media query in this challenge. Change the width on the card to be max-width (in rem) and the component will then respond well to different screen sizes with no need for a media query. (You can optionally give it width 100% as well) but try to avoid setting widths on elements.

    Marked as helpful
    0
    Alex Wilkom•50
    @alexwilkomPosted 3 months ago

    Thank you very much @grace-snow!

    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