Design comparison
Solution retrospective
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-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 theul
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 helpful1@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-Archer-IPosted 5 months ago@aduatgit
Yep.
gap
can be used only withdisplay: flex
anddisplay: 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 tocolumn
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-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 GitHubJoin 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