@MelvinAguilar
Posted
Hi @Rheomacrodex π, good job completing this challenge, and welcome to the Frontend Mentor Community! π
Here are some suggestions you might consider to improve your code:
- Your solution should contain a
title
tag with the name of the challenge and anicon
.
<title>Frontend Mentor | QR code component</title>
<link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png" />
- Try to use semantic tags in your code. Click here for more information.:
With semantic tags:
<body>
<main class="main-container">
. . .
</main>
<body>
- Instead of using pixels in font size, use relative units of measure like
rem
orem
. The font size in absolute length units (px) does not allow users with limited vision to change the text size in some browsers. Reference. - The container isn't centered correctly. You can use flexbox to center elements:
body {
width: 100%;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
Links with more information:
- The Complete Guide to Centering in CSS.
- A Complete Guide to Flexbox (CSS-Tricks).
- How TO - Center Elements Vertically (W3Schools).
- CSS Layout - Horizontal & Vertical Align (W3Schools).
I hope those tips will help you.
Good job, and happy coding!