QR Code Component

Hello Dalia, how are you? Welcome to Frontend Mentor and congratulations for you first solution!

Here is some tips:

• You dont need to set the card height, the height of the card will come from the padding/margins you'll give to the elements, is for this reason that the QR Code has a bigger margin on top in comparison to the sides.

• For the box, you can set max-width instead of width, this way you card will stretch when get smaller than 325px, if you set only width the card width will be ever a fixed value and not behave responsive:

.box { max-width: 325px; max-height: 500px; }

• Consider that the QR Code is a square so you can set this with max-width or 100% if you want that the image grows 100% of the container:

#qr-code { max-width: 300px; max- height: 300px; border-radius: 1em; }

• The box shadow value is box-shadow: 5px 5px 15px 5px rgb(0 0 0 / 3%); and you can apply it to the container.

You take a look on my solution, to understand better what I've said about the card construction, maybe I didn't explain it clearly and seeing the code you get it.

https://www.frontendmentor.io/solutions/qr-code-component-SJkAUS-Iq

I hope it helps you! Keek it up.

Great Job....... I dont see any box shadow on the card......which i think was part of the design. I dont see media query either so need to check on the responsiveness