Submitted over 1 year ago
QR Code Component Challenge Solution using Semantic html and flexbox.
@Celie987
Design comparison
SolutionDesign
Community feedback
- @hitmorecodePosted over 1 year ago
You hard coded the position of the card. In this case the best way to do this, is by using flexbox. Apply flexbox to html
html { font-family: var(--FONT-FAMILY); background-color: #D5E1EF; text-align: center; /* add these four lines to place the card in the middle of the page*/ display: flex; justify-content: center; align-items: center; min-height: 100vh; } main { width: 320px; height: 497px; border-radius: 20px; box-shadow: 0px 25px 25px 0px rgba(0, 0, 0, 0.05); background-color: var(--BACKGROUND-COLOR); /* you don't need these lines, flexbox on html will do this */ /* position:absolute; */ /* top: 50%; */ /* left: 50%; */ /* transform: translate(-50%, -50%); */ display: flex; flex-direction: column; justify-content: space-around; align-items: center; }
Marked as helpful1
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