Design comparison
Solution retrospective
Does anyone know how to make the <footer> appear after the content in a mobile version? I position the grid content as absolute. And when it's a mobile version that needs to scroll down, I can't simply position the <footer> at the bottom.
Would very much appreciate any other comment as well.
Community feedback
- @KingsleyChukwuPosted 12 months ago
Nicely done but I would suggest use the following code to center the body element..
You first remove the position properties and the margin property from the .grid-container selector:
.grid-container { position: absolute; right: 0; left: 0; top: 0; bottom: 0; margin: auto; }
Then add the following properties to the body element..
body { display: flex; align-items: center; justify-content: center; min-height: 100vh; position: relative; }
Then you can use this for the footer:
footer { position: absolute; right: 0; bottom: 0; }
Marked as helpful1@Wannika123Posted 12 months ago@KingsleyChukwu Thanks for the comment, really appreciate it. At first, it didn't work with mobile version and the content stay on the left (it works fine with desktop, though). And now I realize that because the grid container is nested inside <main>, I simply need to set those properties to <main>.
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