Skip to content
Submitted 9 months ago

Responsive social links profile

Bee•50
@cas-pb
A solution to the Social links profile challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

I was able to do this a little bit more intuitively than the recipe page. It was easier for me to know what to do.

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

Despite being a little bit more confident on this challenge, I did struggle a little bit on making it responsive. I was able to find a solution by trying different ways and sticking to the one that works best.

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

I guess I just need to understand how to make things responsive a little bit better so I can go into the next challenge with more confidence.

Code

Please log in to post a comment

Log in

Community feedback

  • Teodor Jenkler•4,040
    @TedJenkler

    Hi @cas-pb,

    Great job on your project! Here are some additional suggestions to refine your work:

    Centering with Positioning: Another fun way to center a <div> is by using position: relative on the parent and position: absolute on the child. Set top: 50%, left: 50%, and use transform: translate(-50%, -50%) to center the content. This method is useful for certain scenarios, but for most cases, flexbox is preferred for its responsiveness and flexibility.

    Reduce Divs: To clean up your code, consider reducing the use of <div> elements. This project could be streamlined with just one container using display: flex and flex-direction: column to stack the content. Additionally, replacing the container for the card with a <main> element would enhance both the cleanliness of your code and improve SEO and accessibility.

    Heading Element: Adding an <h2> element for the name would be beneficial for structure and accessibility.

    Keep up the great work!

    Best, Teodor

    Marked as helpful
  • Svitlana Suslenkova•5,340
    @SvitlanaSuslenkova

    body { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; } Try this to align(top-bottom) and justify(left-right) your project to the center. It applies to the parent component(body), don't forget abut min-height. You can use grid instead of flex too(with some changes). Hope you found this comment helpful :)

    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