Design comparison
Solution retrospective
I think the only issue I had with this one is centering the component vertically on all screen sizes. Any tips or resources on this topic are appreciated!
Community feedback
- @KoptelkinPosted about 1 year ago
Set prop 'height' with value '100vh' to the classname '.main' in your 'style.css' file. Check below: .main { height: 100vh; display: flex; justify-content: center; align-items: center; }
So flexbox will allign all content vertically. This should help.
0 - @Zy8712Posted about 1 year ago
Hi Natalie! Your site looks great! Wih regards to your question on centering the component, there are several reasons it is not centered. The biggest reason being that your footer is interfering with the centering and the main box doesn't cover the entirety of the page. So when you use flexbox in your main to center it, it doesn't appear centered on the screen.
What I suggest you to do is make your footer
position: absolute
andbottom: 8px
. That way it largely stays out of your way when trying to layout your things on screen. Next want to do is make sure you<main>
takes up the entire size of the screen, so use:main{ width: 100vw; height: 100vh; }
Combining that with the css you already have with your flexbox layout for
<main>
should solve the issue.Hope this helps 👍
0
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