Skip to content
Submitted 3 months ago

Social Links Profile - HTML and CSS

AlvaroPrates•130
@AlvaroPrates
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 challenges did you encounter, and how did you overcome them?

As this project has specific layout requirements for various devices, I have started learning about rem units and the max-width CSS property to enhance page responsiveness. Additionally, I’ve explored media queries to adjust the profile card’s design for different screen sizes. I think I did a good job on those.

Community feedback

  • py-code314•340
    @py-code314Posted 3 months ago

    Hello,

    Great job. Looks almost identical to the original design file. But I noticed a few issues regarding responsiveness.

    1. Content is overflowing when zoomed in. Change height to min-height in .main-content to prevent that
    2. When I make the screen narrow, around 1030px mark card is increasing in width. You might wanna check why that's happening
    3. You will benefit from adding some kind of CSS Reset on top of the code. Just google it for any modern css reset
    4. Do some research about clamp() function. You can use it effectively to avoid writing multiple media queries
    5. You can use <blockquote> element for .profile-bio if you want. I think it's more semantic

    I hope these will help you to get better. Cheers!

    Marked as helpful
    1
    AlvaroPrates•130
    @AlvaroPratesPosted 3 months ago

    Hey, thanks for the great feedback!

    I adjusted the height, the responsiveness really got better.

    About the card increasing in width when the screen is close to 1030px, it is because of the media-query. I implemented the media-query because in the figma file there is a requirement for tablets where the card has a larger width (in the README file there is some screenshots).

    About the <blockquote> tag, I agree with you. I've changed that.

    Finally, thank you for recommending clamp(), I will get better acquainted with this function and try to use it instead of media-queries

    0
    py-code314•340
    @py-code314Posted 3 months ago

    Oh sorry, I don't have PRO subscription. So you know better

    Happy coding 🎉

    0
  • beqqi•40
    @beqqiPosted 3 months ago

    perfect!

    1
  • Mateusz•260
    @MateuszZalewPosted 3 months ago

    Nice!

    1

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