Responsive QR code component using HTML and SCSS
Design comparison
Solution retrospective
Hello any feedback is welcome but I did run into a weird issue with this project. In order for me to center the component on the page using flex align and justify I had to set the html and body to 100% height. Do the html and body sections not automatically have 100% height?
Community feedback
- @LukiticasPosted over 2 years ago
Hi!!! Well, it does, if i'm not wrong body and html tag aways follow the screen's viewport. You could make a parent tag that would wrap the card, and set its width and height to 100%, or 100vw and 100vh, then making it "display: grid" and "place-item: center" will center everything inside.
1@AshtonHarveyPosted over 2 years ago@Lukiticas o true I forgot there is a way to center with grid. Thanks for reminding me. Overall though it was still weird that it needs to be explicit here.
1@LukiticasPosted over 2 years ago@AshtonHarvey there is a ton of ways to center things nowadays, with margin, with flex as you were using, with grid, with - god forbid - padding. Google's youtube channel made a css one line tricks video explaining some of these ways, i'll try to find for ya <3
0@LukiticasPosted over 2 years ago@AshtonHarvey https://youtu.be/qm0IfG1GyZU found it <3 hope it's useful for you. Happy coding!!
1@AshtonHarveyPosted over 2 years ago@Lukiticas this is perfect for another component im working on thanks.
0
Please log in to post a comment
Log in with GitHub
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