Responsive Qr code componenent

Hello @Lawrencekalaw!

Your project looks great!

I have one suggestion for you to improve it even more:

• Using margin is not the best option to center an element. Here's a very efficient (and better) way to place an element in the middle of the page both vertically and horizontally:

📌 Apply this to the body (in order to work properly, don't use position or margins):

body {
    min-height: 100vh;
    display: flex;  /* it works with grid too  */
    justify-content: center;
    align-items: center;
}

I hope it helps!

Other than that, great job!

Hi @Lawrencekalaw. nice solution! I found a few issues with your css. In your .container{} you used properties like justify-content and align-items but I noticed that your .container{} is not defined as a flex container. To define a flex container you need to set the display: flex; first. However according to the structure of your HTML file, .home{} is the one to be defined as the flex container not . container{}. Another thing I noticed is that in your media query your .home{} margin is set to 30px 500px 0. This margin may cause .home{} to extend beyond the viewport width on smaller screens. You should adjust the margins to fit the smaller screen sizes.