QR Code Component Using CSS Flexbox

Solution retrospective
May I if there's another technique to center the content without using margin or padding?
Thank you
Please log in to post a comment
Log in with GitHubCommunity feedback
- @Hassiai
specify the following the body: body{ display: flex; justify-content: center; align-items: center; min-height: 100vh } or body{ min-height: 100vh display: grid; place-items: center;} this should help you with that. There is no need for wrapper div in the html Put the text content in a div and give it a class. In the css file give the class of the text content a padding top and bottom value. Give the img a max-width: 100% instead of resizing it . Use rem or em as unit for you padding and margin values Hope am helpful. Happy coding.
Marked as helpful - @tan911
Hello @toshihikotani, maybe this will help and improve your code:
- Try to wrap your div element with "main" element for accessibility purposes and It's best practices that your page contain a main element.
- use "h1" instead of "h2"
- your concern about centering a div content, try to apply flexbox in you body element
Hope it helps, Thanks.
Marked as helpful - @Cats-n-coffee
Hi Toshihiko!
Nice job! You're almost there centering your card. Since you already have the correct flex properties on
#wrapper
, all you need to do is make this same element take the full width of the screen. You might want to setmin-width
on your html and body elements as well. I would do 100vw since this card is expected to take the full screen, and your wrapperwidth: 100%
.Hope this helps!
Marked as helpful - @PadseFIAE
Hello Toshihiko, to center the content u could use Display Flex like this:
body { display:flex; justify-content:center; align-items:center; height:100vh; }
than the content should be centered :)
Nice solution by the way. It looks close to the original.
greetz Padse
Marked as helpful
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