Melvin Aguilar 🧑🏻💻• 61,240
@MelvinAguilar
Posted
Hello there 👋. Good job on completing the challenge !
I have some suggestions about your code that might interest you.
HTML 🏷️:
- Wrap the page's whole main content in the
<main>tag.
CSS 🎨:
- Instead of using pixels in font-size, use relative units like
emorrem. The font-size in absolute units like pixels does not scale with the user's browser settings. Resource 📘.
- To center it vertically, you have two options: use
min-height: 100vhinstead ofmin-height: 100%, or if you want to use percentage heights, addheight: 100%to the <html> tag. Then remove the absolute positioning; currently, your component is not very centered.
Using percentage heights:
body, html {
height: 100%;
}
.flex-container {
min-height: 100%;
}
Using vh values:
.flex-container {
/* min-height: 100%; */
min-height: 100vh;
}
Remove these styles if you want to center it correctly:
.qr-code-box {
/* top: 160px; */
/* position: absolute; */
}
.attribution {
text-align: center;
font-size: 15px;
/* margin-top: 680px; */
/* bottom: 0; */
/* left: 0; */
/* right: 0; */
}
I hope you find it useful! 😄 Above all, the solution you submitted is great!
Happy coding!
Marked as helpful
2
Ecem Gokdogan• 9,380
@ecemgo
Posted
@MelvinAguilar I updated my solution based on your suggestion. Thank you so much for the feedback! :)
0
