What challenges did you encounter, and how did you overcome them?
While solving the QR code challenge I had problems centering the qr code image. After a little online search, I learned that images act funny in a div because we're forcing an inline element (img) inside a block element (div). I learned two ways to tackle this problem but I used the one I preferred 👇👇👇👇👇
👇 To see how you can add code snippets, see below 👇:
.qr-code {
margin-top: 10px;
width: 95%;
height: 100%;
}
#qr-code {
padding: 5px;
display: block;
margin: auto;
box-sizing: border-box;
width: 100%;
border-radius: 15px;
object-fit: contain;
}
What specific areas of your project would you like help with?
Responsive Layouts
@dev-jvcosta
Posted
To further enhance your project, specifically the QR code container section, you can wrap the image element in a div and apply display: flex with flex-direction: column. This will make it easier to adjust the element for responsiveness in a simpler way. Additionally, define a max-width: 375px for the maximum size of the element.
Marked as helpful
@Ghost-Writer-2
Posted
Thanks a lot
I'll edit my code@dev-jvcosta
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
