Design comparison
Solution retrospective
first steps
What challenges did you encounter, and how did you overcome them?the flex box
What specific areas of your project would you like help with?accessibility
Community feedback
- @Rioba-IanPosted 11 months ago
Hey Skalex,
There might be a better way to solve this part of your code
body { background-color: hsl(212, 45%, 89%); } section { height: 90vh; display: flex; flex-direction: column; justify-content: center; align-items: center; }
First by giving the section a height of 90vh it means that at all screen sizes like it covers almost 90% of the screen's height. It will also bring a scroll bar automatically. To fix this you can put a
min-height: 100vh
to your body and remove the90vh
in the section.Second, since you've managed to center the items; which I'll also give you more options to center items as well; instead of giving the section a specific height, what would be better would to bring it to the center and just use padding of its inside content thus giving it a height.
You might try using
margin: 0 auto; // also margin-inline: auto;
To bring the section to the center and then give it a
margin-top: 20vh; // you can play around with this number to center it properly.
or
transform: translateY(-50%)
You can also try grid: you can check out this extensive detail.
I hope this helps and bravo on finishing the 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