Social Links Profile using HTML and CSS

Solution retrospective
I have used a clean code to create this.
What challenges did you encounter, and how did you overcome them?Basically while using figma.
What specific areas of your project would you like help with?Would be great if some code reviews. Not sure on what needs to be improved
Please log in to post a comment
Log in with GitHubCommunity feedback
- @ezeaniiandrew
Congratulations on completing this project. It's no easy feat. Here are some suggestions for improvement:
- Add a
padding-block
to the body element to prevent your profile card from touching the vertical edges of the user's screen. - The profile card overflows horizontally on mobile devices of width < 375px due to the fixed size of the profile card. You can fix this by using the CSS
min()
function to set the width of the card dynamically. Here's an updated version of yourcontainer
style:
.container { ++ width: min(85%, 384px); background-color: var(--Grey-800); border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 40px; /* added this to position the card centrally.*/ margin-inline: auto; }
- You're currently using divs instead of the HTML anchor tag to add the social links, which is wrong for various reasons. Links should always be added using the HTML anchor tag.
- Remove the fixed height on the body element; It's not necessary.
Overall, it's a good solution. Keep it up!
Marked as helpful - Add a
- @alinakanivecka
Almost all good, but size of "London, United Kingdom" should be smaller
Marked as helpful
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