QR code component Using CSS Grid and Flexbox
Design comparison
Solution retrospective
I want to know for centering an element which approach is better between absolute positioning and flexbox.
Thank You.
Community feedback
- @HassiaiPosted over 1 year ago
Replace<div class="qr-box">with the main tag to make the page accessible. click here for more on web-accessibility and semantic html
<div class="attribution"> should be out of <div class="qr-box"> and wrap in a footer tag.There is no need to give the body a height and position: relative.
For a responsive content, replace the width in .qr-box and the img with
max-width
.To center a content on a page using flexbox or grid:
- USING FLEXBOX: add min-height:100vh; display: flex; align-items: center: justify-content: center; to the body
body{ min-height: 100vh; display: flex; align-items: center; justify-content: center; }
- USING GRID: add min-height:100vh; display: grid place-items: center to the body
body{ min-height: 100vh; display: grid; place-items: center; }
Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here and here
Hope am helpful.
Well done for completing this challenge. HAPPY CODING
Marked as helpful0@nazimulhossainPosted over 1 year ago@Hassiai , Thank you for your valuable feedback, I will make some changes as per your advice.
0 - @0xabdulkhaliqPosted over 1 year ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
- I have other recommendations regarding your code that I believe will be of great interest to you.
CSS 🎨:
- Let me explain, How you can easily center the component for better layout without usage of
absolute
positioning.
- We don't need to use
absolute
to center the component both horizontally & vertically. Because usingabsolute
will not dynamical centers our component at all states
- To properly center the component in the page, you should use
Flexbox
orGrid
layout. You can read more about centering in CSS here 📚.
- For this demonstration we use css
Grid
to center the component
body { min-height: 100vh; display: grid; place-items: center; }
- Now remove these styles, after removing you can able to see the changes
.qr-box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
- Now your component has been properly centered.
.
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
Marked as helpful0@nazimulhossainPosted over 1 year agoThank you @0xAbdulKhalid for the recommendation.
0 - @EyuleoPosted over 1 year ago
you don't need position absolute for the div, you can center it easily with grid or flex
body{ min-height: 100vh; display: flex; justify-content: center; align-items: center; } or body{ min-height: 100vh; display: grid; place-content: center; }
hope this helps.
Marked as helpful0
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