@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
@samieyong
Posted
@MarjanZivkovic Thanks a lot. Am going to try that now.