@correlucas
Posted
👾Hello Frimpong04, Congratulations on completing this challenge!
Great solution and a great start! From what I saw you’re on the right track. I’ve few suggestions for you that you can consider adding to your code:
1.The approach you've used to center this card vertically is not the best way, because using margins you don't have much control over the component when it scales. My suggestion is that you do this alignment with flexbox using the body as a reference for the container.The first thing you need to do is to remove the margins used to align it, then apply min-height: 100vh to make the body height size becomes 100% of the screen height, this way you make sure that whatever the situation the child element (the container) align the body with display: flex and align-items: center / justify-items: center. If you're using the attribution you need to add flex-direction: column to make the attribution stays under the QR Code component. See the code below:
body {
min-height: 100vh;
background-color: var(--background-color);
display: flex;
align-items: center;
justify-content: center;
}
2.Your solution is great and the code is working, but the HTML structure can be reduced by removing unnecessary divs, all you need is a single <main> or <div> to keep all the content inside, and nothing more. The ideal structure is the div and only the image, heading, and paragraph.
Here’s one example to show can be cleaner this HTML structure:
<body>
<main>
<img src="./images/image-qr-code.png" alt="QR Code Frontend Mentor" >
<h1>Improve your front-end skills by building projects</h1>
<p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
</main>
</body>
✌️ I hope this helps you and happy coding!
Marked as helpful
