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

Interactive Card Details

samieyong 60

@samieyong

Desktop design screenshot for the Interactive card details form coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

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

@MarjanZivkovic

Posted

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

@samieyong

Posted

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

1

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