Skip to content
Submitted over 1 year ago

Interactive Card Details

samieyong•60
@samieyong
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Interactive card details form
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

Still having issue using vh for height. My footer keeps jumping up for smaller screen heights which is very annoying. I believed it is because I positioned the elements inside the main container. Please I need feedback on how to resolve this.

Community feedback

  • Marjan•320
    @MarjanZivkovicPosted over 1 year ago

    Hi @samieyong! Congrats on completing the project! Yes, you're right. What's causing the problem is position: absolute; on your <section class='card-details>'. The quick fix would be adding a margin-top on your footer(ex. 4rem). A better solution is not using position absolute for this at all. You only need it for positioning the credit cards. Your <main class='container'> could become a flex container with flex-direction: row on big screens and column on small screens. In this way, your footer will never be covered because the elements will have normal flow. Hope this makes sense. Good luck!

    Marked as helpful
    0
    samieyong•60
    @samieyongPosted over 1 year ago

    @MarjanZivkovic Thanks a lot. Am going to try that now.

    1

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