Design comparison
Solution retrospective
Figuring out how to use variables and trying to use responsive units like ems and rems, also utilising figma files to get the exact measurements between elements.
What challenges did you encounter, and how did you overcome them?Had trouble with variables using HSL but with some googling I managed to figure it out, not sure what units to use to still learn on that.
What specific areas of your project would you like help with?Anything to make my code more readable, best practices or any constructive feedback would go a great way and be appreciated.
Community feedback
- @danielmrz-devPosted 8 months ago
Hello, @Stroudy!
Your project is looking fantastic!
I'd like to suggest a way to make it even better:
- Using
margin
isn't always the most effective method for centering an element.
Here's a highly efficient approach to position an element at the center of the page both vertically and horizontally:
📌 Apply this CSS to the body (avoid using
position
ormargins
in order to work correctly):body { min-height: 100vh; display: flex; justify-content: center; align-items: center; }
I hope you find this helpful!
Keep up the excellent work!
Marked as helpful2@StroudyPosted 8 months agoHello, @danielmrz-dev,
Thank you for your feedback I have now made the following changes,
Removed
margin-inline, margin-top
from the container and added to the body.min-height: 100vh; display: flex; justify-content: center; align-items: center;
I struggled to center vertically before and I did try
display:flex justify; content: center; align-items: center;
but without the 100vh as I don't understand how or why100vh
works, could you please elaborate on it or point me to some resources to check out.Thank you so much for your feedback and the encouragement its greatly appreciated <3
2@danielmrz-devPosted 8 months ago@Stroudy
Here's why this combination works well:
align-items: center;
: This CSS property aligns the items along the cross axis of the flex container, which, by default, is the vertical axis. When set to center, it centers the items vertically within the container.justify-content: center;
: This property aligns the flex items along the main axis of the flex container, which, by default, is the horizontal axis. When set to center, it centers the items horizontally within the container.min-height: 100vh;
: Setting the min-height of the container to 100vh ensures that it spans the entire height of the viewport. This is crucial for centering content vertically using align-items: center;. Without a specified height, the container may not occupy the full viewport height, and centering vertically won't work as expected.Marked as helpful1@StroudyPosted 8 months ago@danielmrz-dev
I appreciate you thank you so much, I understand, I hope to see you around here more and we can discuss other topics in the future <3
1 - Using
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