Design comparison
Solution retrospective
I'm proud that I can at least use my fundamental knowledge of CSS. Next time, I will add the CSS Framework to fully optimize my knowledge about designing.
What challenges did you encounter, and how did you overcome them?Because I was unsure about the value to enter, I had difficulty in using min(). I finally overcome it by estimating the proper value.
Community feedback
- @danielmrz-devPosted 4 months ago
Hey there! šš½āāļø
Congrats on completing the challenge! ā
Your project looks fantastic!
Here's a tip to make it even better:
Using
margin
and/orpadding
isn't always the best way to center an element. Try this super efficient method to center an element vertically and horizontally:š Apply this CSS to the body (skip position or margins to make it work correctly):
body { min-height: 100vh; display: flex; justify-content: center; align-items: center; }
Hope this helps!
Keep up the great work!
Marked as helpful0 - @sergicentePosted 4 months ago
Nice result, I like the new style of the website.
I see a little inconsistency about the position of the container inside the webpage. you fix the height of the body in 100vh, thats great, but after that you add a margin-top in the container of a 9%, so it results in a webpage height of 109vh with an totally unnecesary scroll.
What I recommend:
*{ margin: 0; padding: 0; }
body{ height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; }
That will result in a full page with the div centered in the middle, with no scrolls, check mine if u want: https://sergicente.github.io/social-links-profile/
Hope that helps!
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