Skip to content
Submitted 12 months ago

Practice using CSS grid.

Wannika123•630
@Wannika123
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Single price grid component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

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

  • Joseph Uchechukwu Kingsley•120
    @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 helpful
    1
    Wannika123•630
    @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 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