Skip to content
Submitted 5 months ago

Social links profile

Justin•100
@aduatgit
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 are you most proud of, and what would you do differently next time?

This was my first project without a figma file, but I think I managed to copy the design quite well even without it.

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

Setting the right margins in a display: flex was an issue for me, also sizing the buttons correctly. I tried to just use the gap property but it didn't really work, so I just eyeballed the margin on the different list items.

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

I want to know how to size the buttons without hardcoding them. In my solution I assigned a set value to the padding of the buttons, instead I want to know if I can just "stretch them" without assigning values.

Community feedback

  • Alex•3,130
    @Alex-Archer-IPosted 5 months ago

    Hi again!

    Hey, the list of links here is perfect example when you can use flex-gap instead of margins. You need to apply it to the ul element.

    .socials {
    gap: 1.2em;
}

    The pros is these gaps will be only between the links, meanwhile margin-top pushed first element from the top.

    Well, padding is one convenient ways to 'stretch' the elements especially inline ones. You can try to use percentage values, but I not recommend you cos percentage of paddings and margins depends of the width of the parent element and therefore could be a bit unpredictable. There is no harm to hardcode a little =)

    Your work is really improved, by the by =) Good luck =)

    Marked as helpful
    1
    Justin•100
    @aduatgitPosted 5 months ago

    @Alex-Archer-I

    Thanks a lot for the feedback!

    I agree, using flex-gap is definitely the more elegant solution. I tried doing it at first and had some issues with it before i styled the buttons (since you need to add another display: flex to the ul, unless there's some other way to do it). I just tried implementing it with flex-gap again and it works like a charm!

    Also thank you for the feedback on the padding, sometimes I overengineer things so it is good to be reminded that simple solutions sometimes just work haha!

    1
    Alex•3,130
    @Alex-Archer-IPosted 5 months ago

    @aduatgit

    Yep. gap can be used only with display: flex and display: grid. Guess that another one thing I forgot to mention. I should to get into habit to collect thoughts before write a feedback, especially after a few hours of coding =)

    (Also you need to set flex-direction of this list to column to keep vertical alignment, but I guess you are already know about this)

    I think it is quite a good trait - to look for a better, more efficient and flexible solutions. It's a way to learn and improve. Just gotta keep balance. I can advice it to myself in some kind =)

    Anyway, keep doing, fell free to ask or comment if need. I'll try not forget important stuff =)

    0
  • Ayomi-Rahmat•30
    @Ayomi-RahmatPosted 5 months ago

    Improvements? I don't think so. It is a responsive website.

    0

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