Skip to content
Submitted about 2 months ago

QR Code component page

Shyam Tripathi•30
@Tripathi-D-Shyam
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

Using flex-box was nice, though would love to solve the issue of aligning the component to the center as scrollbar started appearing when using width: 100vw; height: 100vh.

What challenges did you encounter, and how did you overcome them?

Well, I had to deal with the following: on trying to align the component to the center a scrollbar started appearing when using width: 100vw; height: 100vh. This I resolved using calc(100vw - 8px), though it is not as elegant as I desired.

What specific areas of your project would you like help with?

None in particular.

Code

Please log in to post a comment

Log in

Community feedback

  • Sneha Sikder•110
    @Snehasikder

    That looks amazing. It's so close to the design. Here's one room for improvement in my opinion and that would be the scan the qr code text. The font colour is supposed to be more lighter. Apart from this I feels it's almost identical to the design. Hope this helps!!

  • Tochukwu-1•50
    @Tochukwu-1

    To prevent the scroll bar issue

    • you can easily add this styling in your css file and then there won't be a need for the calc[100vw - 8px]
    *{
	padding: none;
	margin: none;
	box-sizing: border-box; //box-sixing is not compulsory unless in react
 }
    • By the way you did a good job here.

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