Design comparison
Community feedback
- @VenusYPosted 9 months ago
You've done a wonderful job on this challenge!
I did notice, however, that the card is not responsive due to the hard-coded width that you've applied to the
.container
element, which causes overflow issues when the viewport width is reduced.If you want the card's width to max out at 20rem, you can set the
max-width
to that value, and this will achieve the same result but with added responsiveness.This is because
max-width: 20rem
sets the initial width of the card to 20rem but allows it to shrink if the viewport becomes too narrow or the content becomes wider than the viewport can contain due to changes in browser font size..container { width: 20rem; ❌ max-width: 20rem; }
I also noticed that shrinking the height of the viewport also causes some issues. The card gets partially cut off due to the body element's height being set to 100vh.
To fix this, you can simply change
height
tomin-height
:body { height: 100vh; ❌ min-height: 100vh; }
Finally, this is a very small thing that isn't strictly necessary, but you may want to consider adding some padding to the body element because whitespace is important for visual balance, which improves user experience.
Other than that, this is a very good solution!
Hope this has been helpful! :)
Marked as helpful0@04jay11Posted 9 months ago@VenusY Thank you for the comment. It's very helpful😀
0
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