Hello @lindajensen
Great work on your first challenge. Kudos for not giving up!
For question 1, I recommend the following changes:
The QR image should not have a fixed width of 300px as it can cause issues on how the padding is displayed. It is better to use percentage since it indicates how much percentage of the parent's width the child element will occupy. I recommend doing the following in your CSS for your img element:
img {
max-width: 100%;
border-radius: 10%;
}
After that in your card class, you can have the padding as 20px. This means that 20px is applied uniformly on top, right, bottom and left of the card.
.card {
background-color: var(--white);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20px;
border-radius: 20px;
margin: 0 auto;
max-width: 300px;
}
Let me know if this helps
My 2 cents, avoid using pixels. A better unit is rem since pixels are fixed and cannot scale well. rem is better for scaling and it enhances your accessibility.
For your question 2, media-queries are not needed
Great job! Keep coding!
Marked as helpful
@lindajensen
Posted
Thanks! This helped quite a bit. I changed the border-radius as well and the result is a lot better. @rupali317