Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

RESPONSIVE QR CODE COMPONENT

@okeyifea

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@Mohamedkh369

Posted

Hello , first congratulations for finishing the challenge , you did a great work ! though i would like to point something for you , as you might have noticed, the card is not vertically centered in your page even though you applied the display : flex and the align-items:center on the body element , this issue could be resolved by simply adding "height: 100vh" property to the body element which is the parent element of the container div , if it has no specific height declared the flex container will have no specific height itself , it will be as tall as it's content , in this case the card is is taking the full height of the parent flex element(the body element ) which is why it doesnt appear centered . i hope this information will be useful to you andcongratulations again for finishing the challenge , good luck in the next one .

Marked as helpful

1
Charles 80

@Ghost-Writer-2

Posted

I think you should add a little margin to the top and reduce the min width so the card doesn't take up the whole viewport width on mobile device. Let's connect I'd love to learn from you too Discord: Charlieee

0
P

@Godskitchen

Posted

Hello, you can apply "height: 100%" to "html" and "body" tags. It let you to align the card in center. Also you should check the template sizes, you have the wrong ones.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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