QR Code using HTML and CSS

Please log in to post a comment
Log in with GitHubCommunity feedback
- @MelvinAguilar
Hello there 👋. Good job on completing the challenge !
I have some suggestions about your code that might interest you.
HTML 📄:
- Use the
<main>
tag to wrap all the main content of the page instead of the<div>
tag. With this semantic element you can improve the accessibility of your page.
CSS 🎨:
- Instead of using pixels in font-size, use relative units like
em
orrem
. The font-size in absolute units like pixels does not scale with the user's browser settings. You can read more about this here 📘.
- The
width: 100%
property in thebody
tag is not necessary. Thebody
tag is a block element and it will take the full width of the page by default.
-
Using
height: 100vh
orheight: calc(100vh - 1px);
for the body element can cause problems with the layout of the page on smaller screens, such as in landscape view on a mobile device.On smaller screens, such as in landscape view on a mobile device, the height of the viewport may be less than the height of the content of the page. In this case, using height: 100vh for the body element will cause the content of the page to be hidden behind the body element.
Here is an image of how it would look on a mobile device (taking into account the scroll): screencapture-npstrass-github-io-qr-code
To avoid this problem, it is generally recommended to use
min-height: 100vh
instead ofheight: 100vh
for the body element. This will ensure that the content of the page is always visible.
I hope you find it useful! 😄 Above all, the solution you submitted is great!
Happy coding!
Marked as helpful - Use the
- @npstrass
Had it fitting to the image provided but decided to make everything a bit larger. Thought it was easier to read and looked just as good!
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