QR code component

Hello there 👋. Good job on completing the challenge !

I have some suggestions about your code that might interest you.

• Instead of using pixels in font-size, use relative units like em or rem. The font-size in absolute units like pixels does not scale with the user's browser settings. Source 📘.

• The width: 100vw property in the body tag is not necessary. The body tag is a block element and it will take the full width of the page by default.

• Use min-height: 100vh instead of height: 100vh. The height property can cause your component to be cut off on small screens, such as a mobile phone in landscape mode.

  Here is an image of how it would look on a mobile device (taking into account the scroll): https://i.imgur.com/jlw7mvg.png

I hope you find it useful! 😄 Above all, the solution you submitted is great!

Happy coding!

There is no need to give the body a width value.

To center .container on the page using flexbox, replace the height in the body with min-height: 100vh.

For a responsive content that wont require a media query for this challenge, replace the width in .container with max-width value . Use the value you gave to .container in the media query that is equivalent to the width of design. max-width:22rem.

Give h1 and p the same font-size of 15px which 0.9375rem, text-align: center, the same margin-left, margin-right and margin-top values. Give p a margin bottom value.

Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

Hope am helpful.

Well done for completing this challenge. HAPPY CODING