hitmorecode• 6,230
@hitmorecode
Posted
Congratulations well done. To fix your problem you just have to remove a few lines on the footer.
.container {
/*margin: 0 auto; */ /* you don't need these lines */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
/*max-width: 1440px; */
/*position:relative; */
/*padding: 24px; */
}
.card {
background-color: hsl(0, 0%, 100%);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 16px;
width: 330px;
box-shadow: 8px 12px 28px 8px rgba(0,0,0,0.12);
-webkit-box-shadow: 8px 12px 28px 8px rgba(0,0,0,0.12);
-moz-box-shadow: 8px 12px 28px 8px rgba(0,0,0,0.12);
margin-bottom: 20px; /* add this line */
}
footer {
/*! position: absolute; */
bottom: 24px;
font-size: 11px;
/*! z-index: -1; */ /* Prevents footer from overlapping content */
}
``
Your issue was caused by position absolute. If you remove it it will be solved
Marked as helpful
1
ioan• 50
@JohanPeraldi
Posted
Very nice @hitmorecode, thank you for taking the time to review my code and coming up with a better solution!
0
hitmorecode• 6,230
@hitmorecode
Posted
@JohanPeraldi no problem anytime
0
