QR code responsive component using HTML and CSS Flex
Design comparison
Solution retrospective
- Figured out the layout pretty quickly.
- Did not use too many fixed values.
- Would change: trying to write less CSS.
- Removing the lateral scrollbar, while keeping the container centered vertically.
- It took several trials and errors with flexbox and grid, eventually I did it by setting .container-wrapper to
height: 90vh
.
- Ways of optimizing the HTML structure (less elements, if possible).
- Optimizing the CSS classes and code.
Community feedback
- @0xabdulkhaliqPosted 8 months ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
- I have a suggestion regarding your code that I believe will be of great interest to you.
QR iMAGE ALT TEXT 📸:
- The QR Code Component involves scanning the QR code, the image is not a decoration, so it must have an
alt
attribute which should explain the purpose of theimage
.
- The
alt
withQR code image
is not even explaining for what the QR image need to be used.
- So update the
alt
with meaningful text which explains likeQR code to frontendmentor.io
- Example:
<img src="/images/image-qr-code.png" alt="QR code to frontendmentor.io">
.
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
Marked as helpful1 - @AminpatraPosted 8 months ago
You can make the body it self flex to center the card, by giving it height of 100vh or better height : calc(100vh - 1px) -> to not make the shaky feeling in mobile. Instead of defining a container and give it the height of the page so the final result we be like this : body {display: flex; flex-direction: column; justify-content: center; align-items: center; height : calc (100vh - 1px)} or you can just use (display: grid; place-content: center;) instead of flex properties. Hope this helped you.
Marked as helpful1 - @AntonvasilachePosted 8 months ago
Hey @Aminpatra,
Thanks for the feedback.
I have adjusted the size to 100vh, now it looks more aligned with the design file. I have added a container just to try and avoid using too many properties on the html body, but I think your solution would work great as well, grid part included.
Cheers!
1
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