Social links profile component completed with HTML and vanilla CSS
Design comparison
Solution retrospective
I plan to transition to using relative units, such as percentages, ems, or rems, in lieu of pixels, to enhance the flexibility and responsiveness of my designs.
What challenges did you encounter, and how did you overcome them?Thanks to my existing knowledge of center-aligning elements and familiarity with the relevant CSS properties, I was able to complete the task without struggling.
What specific areas of your project would you like help with?Any feedback is super welcome ๐
Community feedback
- @kodan96Posted 5 months ago
hi there! ๐
- since the whole idea behind this is to share social links with people I guess you should include
<a>
tags within the list items to actually lead the users somewhere:
<ul> <li><a href="">Github</a></li> ... </ul>
-
you should use
min-height
instead ofheight
on the<main>
tag, height prevents users on smaller screens to scroll down on the page if the content overflows the 100vh -
since you applied
height: 100vh
and made it a flex container it's not necessary to apply height on thebody
as well -
try using relative units instead of pixels, it makes it easier to build responsive designs and gives the chance to users with bad eyesight to increase the font size of the page
-
don't apply
height
orwidth
to your elements, it kills responsivity, let the child elements determine these. If you wanna create a "gap", so a max or min value to the width of your elements usemax-width
ormin-width
Hope this was helpful ๐
Good luck and happy coding! ๐
Marked as helpful1 - since the whole idea behind this is to share social links with people I guess you should include
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