Skip to content
Submitted 28 days ago

Social Links Profile with CSS FlexBox

Cláudio Júnior•10
@claudiojrdev
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 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

Community feedback

  • P
    Gabe•300
    @gabeiPosted 28 days ago

    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
    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