Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive QR code scanner

@avinash4364

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


To center the direct child element of a body element both horizontally and vertically, which is more preferred way out of using flexbox on body element or using absolute positioning on the child element itself ?

Community feedback

@AkoToSiJeromeEh

Posted

Hi ! Great Work Out there , for me i more prefer to use d-flex in order to center a div because there is no calculation(top , left) in order to center a div rather than using position absolute or relative but its up to you on what you want but for me again its d-flex because it offers more flexibility and control over the layout. hope this suggestion helps . happy coding!

body {

font-family: 'Outfit', sans-serif;

background-color: var(--light-gray);

add this if you prefer to use d-flex to center the component

min-height: 100vh;

display: flex;

align-items: center;

justify-content: center;

} .qr-box {

background-color: var(--white);

width: 320px;

text-align: center;

padding: 20px;

border-radius: 20px;

display: flex;

flex-direction: column;

gap: 20px;

you can remove this if you prefer to use d-flex

/* position: absolute; */
/* left: 50%; */
/* top: 50%; */
/* transform: translate(-50%, -50%); */

}

0

Please log in to post a comment

Log in with GitHub
Discord logo

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