Qr-code-Component

Hey Olanrewaju, congratulations on completing the challenge! You did a good work 😉

Let me give you some little tips for optimizing your code:

• remove all margin from container class and set width: 22rem
• use flexbox to the body to center the card. Read here -> flex guide
• after, add min-height: 100vh to body because Flexbox aligns child items to the size of the parent container
• instead of using px use relative units of measurement like rem -> read here

Hope this help 😁 by Travolgi

Hello, Olanrewaju Akinola! 👋

Congratulations on finishing this challenge! 👏

The link to the project repository is giving me a 404 page. I assume that you make the repository a private repository. So, I recommend making it a public repository. This will make it easier for other mentors to give feedback on your code.

Regarding your question, I recommend using flexbox. I suggest trying to make the body element a flex container. After that, set min-height: 100vh to it. This will make the card horizontally and vertically centered on any screen size. Not only that but also it still allows the body element to have more height if the content needs more than 100vh.

Also, it's possible to make the site completely responsive without any media queries. The only thing that the card needs to be responsive is a max-width to prevent the card filling the entire page.

That's it! I hope this helps. 😊

Hey Akinola ... first removew the width:70vw on your body coz that's messing things for you. Then use one width percentage on the .container like your width:80% and set a max-width: 450px of a fixed value. This will enable you scrub off the @media queries you have.

To center it you were there👏🏾 with margin:auto just add a bit of top margin margin: 5rem auto to get it from the top of the page.

Hope this helps