Design comparison
Solution retrospective
Please checkout my first beginner project : The QR Code Challenge. Can someone explain how would I make it so that when i shrink the page thecontent stays in the box and does not overflow
Community feedback
- @sivakumarsPosted almost 2 years ago
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 haveheight
set toauto
, so that the aspect-ratio of the image is maintained.I hope I have addressed your issue. Please let me know if this helped.
1 - @NermenElefkyPosted almost 2 years ago
I recommend not determining the height of element (in your Ex : the main div do not give it a height). Good job.
1 - @HassiaiPosted almost 2 years ago
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
1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord