Submitted over 1 year ago

QR code component with HTML & CSS only

ioan•50

@JohanPeraldi

Preview site View code

This is a solution for...QR code component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

I was looking for an elegant solution to avoid the footer overlapping with the card when reducing the viewport size vertically and could not come up with anything so I only added a z-index of -1 to the footer so that it is hidden behind the card when the height of the viewport is too small. I'd appreciate any suggestion for a more elegant solution. Looking forward to reading your suggestions. Thanks.

Community feedback

hitmorecode•6,250

@hitmorecodePosted over 1 year ago

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

ioan•50

@JohanPeraldiPosted over 1 year ago

Very nice @hitmorecode, thank you for taking the time to review my code and coming up with a better solution!

hitmorecode•6,250

@hitmorecodePosted over 1 year ago

@JohanPeraldi no problem anytime

Please log in to post a comment

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