The amazing QR Code

Hi

This is not a good way to center the card on the page. Instead, set the body to min-height: 100vh; and use flexbox column and properties to center it. When you position absolute something it’s like you are taking it out of the document flow completely, lifting it off the body so it loses its layout context. It’s very rare you’ll want to do that with chunks of content

Other general feedback for you

• you are missing a heading element
• the card needs to be wrapped in a main element and the attribution in a footer. These are called landmark elements and are one of the ways a page gets structure and meaning
• the alt text on the image would be improved if it said where it was a QR Code for as well Eg “QR code to” (this url)
• you don’t need a media query in this challenge. The font size doesn’t need to change (and generally not good practice to use keywords for font sizes anyway) and nor does the width. Instead, just set a max-width on the card at the start as that is relevant for all screen sizes but will allow it to shrink on small mobile screens if it ever needs to. The card never needs a width (it can optionally be width 100% as well as the max width in px or rem but that probably isn’t needed)
• similarly the image doesn’t need a width or height in px. It can be display block and width 100%. The cards padding will stop it hitting the edges
• font famil and text align don’t need setting on the title and text. Both of these properties inherit, so you can just declare once on the body or main card
• you don’t need to add display block on a paragraph tag (it’s already display block)

Overall I hope you can see you’re just overcomplicating this a bit. Follow the tips and try to keep it simple.

I hope this helps

Hi Hazel Congratulations congratulations on finishing the challenge. Adding to Grace comments, you are missing units in the box-shadow for it to work

I hope this helps