Interactive social link profile using CSS flexbox
Design comparison
Solution retrospective
I learned how to use the CSS transition property
Community feedback
- @SvitlanaSuslenkovaPosted 3 months ago
Remove flex from you main and put it to the body with changes:
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 about min-height. You can use grid instead of flex too(with some changes).
Hope you found this comment helpful :)
Marked as helpful1 - @grace-snowPosted 3 months ago
I recommend you follow the flex column approach to centering along with
min-height: 100svh
on the body (the body is only as tall as it's content by default).More important than that though, is getting the HTML right on this! This should be a list of links (not buttons - because these would navigate somewhere) and these need to be within an unordered list of list items.
This is a really important skill to master — translating a design into the most appropriate meaningful html elements for the content. Don't skip learning and putting that into practice. It's the biggest single thing you can do to build accessible solutions.
Marked as helpful0 - @MikDra1Posted 3 months ago
I encourage you to use this technique to make the card responsive with ease:
.card { width: 90%; max-width: 600px; }
On the smaller screens card will be 90% of the parent (here body), but as soon as the card will be 600px it will lock with this size.
Also to put the card in the center I advise you to use this code snippet:
.container { display: grid; place-items: center; }
Hope you found this comment helpful 💗💗💗
Good job and keep going 😁😊😉
Marked as helpful0@grace-snowPosted 3 months agoHi @MikDra1, Great feedback! Just a small suggestion to recommend that max width is in rem instead of px. This will make the layout adjust better for those of us who set a different default text size because it will scale right along with our preference. (It avoids the possibility of huge text in a narrow container).
Marked as helpful0@MikDra1Posted 3 months ago@grace-snow
Yeah I know it is just to show what you can do. You always can change things around 😊
0 - @vuthoai02Posted 3 months ago
I think you should center the main part, nice project.
Marked as helpful0
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