QR code component using plain HTML and CSS

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,040

  @MelvinAguilar

  Posted about 2 years ago

  Hello there 👋. Good job on completing the challenge !

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

  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 📘.

  • You should use the box-sizing: border-box property to make the width and height properties include the padding and border of the element. This will make it easier to calculate the size of an element. You can read more about this here 📘.

  • Use min-height: 100vh instead of height. Setting the height to 100vh can cause your background to be cut off or the component itself to be cut off on small screens, such as a mobile phone in landscape orientation.

    Here is an image of how it would look on a mobile device (taking into account the scroll): screenshot-imgur 📸

  • The width: 100vw property in the main tag is not necessary. This can create a horizontal scrollbar on some devices.

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

  Happy coding!

  11

  Marked as helpful