@AntoineC-dev
Posted
Hi Vanshul. Nice design. Congrats on completing the challenge.
Like imad said you just need to use a fixed max-width
for you qr-container.
You'll also need to set the property width: 100%
so the element always takes the maximum space available. This way you do not need any media query anymore.
Example:
.qr-container {
width: 100%;
max-width: 18.75rem; /* 300px */
}
Then i would add some padding on the parent container so the qr-container does not stick to the sides of the window on small screen.
Example:
.container {
background-color: hsl(212, 45%, 89%);
width: 100%;
/* height: 100%; */
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 2rem;
}
Again nice job and happy coding. Peace