Design comparison
Solution retrospective
it would be great if i got some tips about responsive designs
Community feedback
- @huyphan2210Posted about 2 months ago
Hi @YourRat-webdev,
I checked out your solution and had a few observations:
- The card isn’t centered in the viewport because the
body
doesn’t stretch to fill the height. By default, thebody
only takes up as much height as its content, which prevents vertical centering. You can fix this by addingmin-height: 100vh
, ensuring that the body always fills at least the entire height of the viewport. This way, even if there’s little content, the card can be centered vertically. Additionally, remove themargin-top: 1rem
on thebody
to avoid any vertical overflow that might push the content down and disrupt the layout. - I noticed you’re using a media query for viewports 30.85rem (493.6px) wide and above. The card exceeds the viewport width on mobile devices between 493.6px and 589px, causing horizontal scrolling since the card is 590px wide. This might not be the best user experience.
- Regarding responsive design, media queries aren’t the only approach. Also, it’s important to be deliberate about the viewport widths you choose. Why 30.85rem specifically? There are many great resources on responsive design to explore.
Hope this helps!
Marked as helpful0 - The card isn’t centered in the viewport because the
- @SvitlanaSuslenkovaPosted about 2 months ago
I see you added flex, but your project didn't align to the center. The problem is you should add to your flex also min-height: 100vh; Currently, the height of the body is the same as the component in it.
Second problem: In mobile design you don't have space under the button. You put height: 38.125rem; that won't work well, it stops your card from being resposive. You can add padding-bottom here to add space. If you want to add height, yes, you can add max-height, but plese put heigher value then current height.
Hope you found this comment helpful :)
Marked as helpful0
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