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
Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

...

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

...

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

...

Community feedback

@ShamSuther

Posted

Hello Amir,

Wonderfully done, but I couldn't help but notice that you are using margin to center the main component instead I suggest you use:

This code to get rid of unnecessary padding and margin:

*{ margin: 0; padding: 0; box-sizing: border-box; }

and these additional lines to body to center the QR Component:

body{ width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; }

and by adding this code you can remove most of the styling from your .container class, just remember when centering an child component it's parent should have a specific height and width.

I hope you find this somewhat helpful, Keep up the fantastic work, and remember there's no rush. Enjoy the process! 😊💻✨

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