QR code component solution by bootstrap css grid and card
Design comparison
Solution retrospective
I achieved the solution by using bootstrap css grid and card. I also added a backdrop to simulate the preview design. The page is responisve for both desktop and mobile design. I had to do two "d-flex justify-content-center align-items-center" to get the result which I found its a little bit too much. Anyone can provide better solution will be appreciated!
Community feedback
- @chill31Posted over 1 year ago
Great design! The colors and padding match perfectly with the challenge design.
I found only 1 issue with this, which is the background, it doesn't quite take up the full body, and there's a lot of whitespace between the light blue background and the white background of the body.
0@MygaversePosted over 1 year ago@chill31 I was trying to simulate that preview of the design, which have a light blueish backdrop before the white background.
0 - @0xabdulkhaliqPosted over 1 year ago
This comment was deleted over 1 year ago
0@MygaversePosted over 1 year ago@0xAbdulKhalid If you looked at my code, I did have a h1 header in the header section of the body. And I did add sr-only for its class. But I run into an issue that the header content was shown on the page. So I went to set sr-only class for display:none helping not shown content. However, the waring about h1 header still shown. What I should do to improve this problem. 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