Design comparison
SolutionDesign
Solution retrospective
- responsive it difficult for me when i shrink scrollbar appear.
- in body element i use position absolute in order to qr code component to center because when it use body height 100vh and flexbox when shrink it have scrollbar
body { margin: 0; padding: 0; box-sizing: border-box;
background-color: hsl(212, 45%, 89%);
font-family: "Outfit", sans-serif;
font-size: 15px;
border: 1px solid red;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.qrcode-container {
background-color: #fff;
width: 300px;
padding: 16px 16px 32px;
border-radius: 11px;
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.09);
}
Community feedback
- @MikoyzskiePosted over 1 year ago
- Looks good on mobile. Try using Chrome DevTools Mobile view by pressing Ctrl + Shift + M.
- Also, no need for position absolute. If you want to center elements inside the body just set the body to min-height: 100vh then display flex, align-items: center, justify-content: center
- hope this helps!
- happy coding!
0
Please log in to post a comment
Log in with GitHubJoin 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