Skip to content
Submitted about 2 years ago

Responsive QR Code page using HTML and CSS

Misael Alisson Ursulino de Lima•30
@misalima
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I am not sure if the way I styled the white spaces using margin and padding is the ideal way. If you can tell me and show me a better way, in terms of best practices, I would appreciate it.

Code

Please log in to post a comment

Log in with GitHub

Community feedback

  • Melvin Aguilar 🧑🏻‍💻•61,040
    @MelvinAguilar

    Hello there 👋. Good job on completing the challenge !

    I have some suggestions about your code that might interest you.

    • Actually, the padding is fine. I just have a small idea. You can use margin on the whole component and you could delete two divs <div class="qr"> and <div class="text">, but it's not a big problem.

    HTML 🏷️:

    • Wrap the page's whole main content in the <main> tag.

    CSS 🎨:

    • Instead of using pixels in font-size, use relative units like em or rem. The font-size in absolute units like pixels does not scale with the user's browser settings. Resource 📘.
    • Use min-height: 100vh instead of height. Setting the height to 100vh may result in the component being cut off on smaller screens, such as a mobile phone in landscape orientation.

    I hope you find it useful! 😄 Above all, the solution you submitted is great!

    Happy coding!

    Marked as helpful

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