HTML and CSS

Hello Mohammed! Congratulations on successfully completing the challenge! 👏👏👏

I have reviewed your code and have a few suggestions to further enhance it. The main issue I found was with the width: 10% property in the .qr-container class. To resolve this, I recommend changing it to max-width: 16rem;. Additionally, removing the height attribute from the image and setting the width to 100% will improve the image display.

Here's the updated code:

body {
min-height: 100vh;
display: grid;
place-content: center;
}

.qr-container {
background-color: #fff;
margin: auto;
max-width: 16rem;
padding: 20px;
align-items: center;
border-radius: 15px;
}

.qr-image img {
width: 100%;
margin: auto;
padding-bottom: 20px;
background-color: #fff;
}

Overall, your attempt is commendable. Keep up the good work, and welcome to the Frontend Mentor community!