Design comparison
Solution retrospective
I encountered challenges with excessive spacing and layout issues on smaller screens. I overcame them by adjusting media queries to modify dimensions and padding, ensuring the card and its content fit properly within the viewport. Fine-tuning these styles improved responsiveness and usability.
What specific areas of your project would you like help with?I need help with adjusting spacing and layout for smaller screens in my project. Specifically, I'm facing issues with extra space and alignment that aren't responsive as expected. Any guidance on optimizing the design for various screen sizes would be appreciated.
Community feedback
- @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.
Marked as helpful1@AamnbabaPosted about 2 months agoYes, Sure. I will try it. Thank you @SvitlanaSuslenkova
0 - @MikDra1Posted about 2 months ago
If you want to make your card responsive with ease you can use this technique:
.card { width: 90%; max-width: 37.5rem; }
On the smaller screens card will be 90% of the parent (here body), but as soon as the card will be 37.5rem (600px) it will lock with this size.
Also to put the card in the center I advise you to use this code snippet:
.container { display: grid; place-items: center; }
Hope you found this comment helpful 💗💗💗
Good job and keep going 😁😊😉
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