Skip to content
Submitted 4 months ago

Social Links Profile with CSS FlexBox

Cláudio Júnior•10
@claudiojrdev
A solution to the Social links profile challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

I think the project's responsiveness is not very good. On larger screens, the buttons extend beyond the main container, but I don’t know what the issue is in the CSS.

I also think the way I use classes or HTML semantic markup might not follow common best practices

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Gabe•320
    @gabei

    Hello!

    In regards to your question about the buttons extending beyond the container: Check out the height property that you set on the .container class. Look at the page in the inspector and try toggling that on and off. From my view, when I'm viewing your site on a mobile phone and I toggle that, I see quite a big change in the way the child items are arranged.

    BUT that is only when I really squash the page to be pretty small. Either way, the height of your container is already stretching to accommodate the space of the items inside of it. I'm not sure I'm seeing what you are on a big screen.

    ALSO if you do change that, you'll notice that your buttons get pushed together. There are a few ways to approach that. In this instance I would take a look at the gap property for flexbox containers.

    Happy coding!

    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