Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsice four-card section with HTML and CSS

@nkirukka

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

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-Nyin 130

@Sen-Nyin

Posted

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
Discord logo

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