Skip to content
Submitted 4 months ago

Social links profile with SASS

rami•40
@ramiroWeb
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

Community feedback

  • Eugene Clark•50
    @clarkjr2016Posted 4 months ago

    Hello @ramiroWeb.

    Congratulations on completing the challenge.

    Below I have a list of some notes that could make your project more accessible and responsive.

    • The divs with the classes .about-content and .links could be replaced as <section> elements to make your HTML more semantic.
    • The value for your alt attribute on your <img> element with the class of .photo-profile could be more specific about what the image is, something as simple as "avatar photo profile".
    • Your <main> container element isn't responding to different viewport widths. To be very transparent, I struggled with this myself but after reviewing previous comments on my past work I developed a workable solution:
    1. You can add padding around the interior of the <body> element so that your .container has space between it's border and the border of the body element.
    2. Then you can set display: flex, flex-direction: column, justify-content: center, and align-items: center on the <body> element so that the .container element is positioned in the middle of the <body> element.
    3. Finally I would apply max-width: 100dvh to the <body> element so that as the viewport width decreases so would the <body> element's.
    Marked as helpful
    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