Design comparison
Solution retrospective
How do I stop an element or a container from moving on page? Using "fixed" position does not seem to have any effect, in fact, none of the position properties have any effect and when I add any my footer moves up to the top of the page. I want the container to remain in the same position as window is resized.
And why does Frontend's screenshot skew things? The page looks good on my end but the screenshot here does not show the same thing I am seeing.
Community feedback
- @Sen-NyinPosted over 2 years ago
If I am understanding your question correctly, and you want your footer to appear at the top of the page, you want to set your <body> to position relative, and your <footer> to position absolute, with top: x. However, this is not great for accessibility - you'd be better off moving your footer content into a <header>. You can then set your header to position absolute, so that it's not pushing the rest of your content down.
Center everything else on the screen by using this on your <body>: min-height: 100vh; display: grid; and place-items: center;
Then put your content inside <main>. Your <main> should have no position setting.
As for the screenshot, I think there is an issue with the screenshot generation. I pay for pro and use the Figma files - I know all of my measurements are exact, however the screenshot is always slightly different to what I see.
0
Please log in to post a comment
Log in with GitHub
Join 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