@correlucas
Posted
👾Hello Taiwo Leshi, Congratulations on completing this challenge!
❓ Answering your question:
Your solution is responsive but you have two problems, the alignment you've applied its not the best and you can see that the card start to move when the screen scales and you've used a big structure for the html. I'll give you some tips to improve it from the scratch:
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 the body to make the child (the card/container) align to its size that now will be displaying 100% of the viewport height and then give its alignment with display: flex and align-items: center / justify-items: center.
2.A best practice to have all the image inside the container scaling and respecting the size of the container, you need to add max-width: 100% and add alsoobject-fit: cover to make the image auto-crop when resizing inside the column:
img {
display: block;
object-fit: cover;
max-width: 100%;
}
3.The html structure is fine and works, but you can reduce at least 20% of your code cleaning the unnecessary elements, you start cleaning it by removing some unnecessary <div>. For this solution you wrap everything inside a single block of content using <div> or <main> (better option for accessibility) and put inside the whole content <img> / <h1> and <p>.
<body>
<main>
<img src="./images/image-qr-code.png" alt="Qr Code Image" >
<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>
Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/solutions/qr-code-component-vanilla-cs-js-darklight-mode-nS2aOYYsJR
✌️ I hope this helps you and happy coding!
Marked as helpful
@demi05
Posted
@correlucas yes this will really help me. Thank you so much 😁
@correlucas
Posted
@demi05 Hey Taiwo, I'm happy to hear that. Then say me if you reach the result yiu wanted with the responsiveness. Keep it up.
@demi05
Posted
@correlucas It really did. Thanks so much
