QR Code Component - HTML and CSS with Position

Hi there! 👋

It looks like you make this challenge more complicated than it should. There's no need for the rectangle background image. The site should only have blue background color on the body element.

I recommend taking a look at my solution (specifically the HTML file) and trying to refactor this one by making it as simple as possible.

So, I recommend doing the following.

• Remove the background image.
• Use flexbox to put the card in the middle of the page. Don't use absolute positioning when there's a better and modern way.
• The card only needs a max-width to prevent it from becoming too large on wide screen sizes. So, there should not be any media queries.
• I suggest making the img as block element and set max-width: 100% to make it easier to work with img element.

That's it! Hope this helps. Happy coding!

The issue I believe has to do with your usage of 'vh' for height and width. When in portrait mode, the containers scale better compared to when in landscape mode(height significantly lower than the width). One solution is to hardcode the width and height using 'px' and combining it with media queries for responsivity, Another one is to use '%' in place of 'vh'(this is actually my fav). Also, I noticed you increased the font-size of the paragraph in mobile mode without increasing the size of its container, this can cause overflow. Lastly, When done with your design, you can use this site called 'responsinator' to preview your site for responsivity.