QR Code

Hi, @CosmicGarou18.

To directly address the question, the solution would be to remove the height property from the .main class and the box will grow based on the viewport size on smaller screens.

On the other hand, it is better to not let the card shrink below a min-width , say about 20rem. Also, for images, it is usually good to have height set to auto , so that the aspect-ratio of the image is maintained.

I hope I have addressed your issue. Please let me know if this helped.

I recommend not determining the height of element (in your Ex : the main div do not give it a height). Good job.

Replace <div class="main"> with the main tag and add the alt attribute alt=" " to the img tag to fix the accessibility and error issues. click here for more on web-accessibility and semantic html. The value for the alt is the description of the image.

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

Hope am helpful.

Well done for completing this challenge. HAPPY CODING