What challenges did you encounter, and how did you overcome them?
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.
@SvitlanaSuslenkova
Posted
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.
@MikDra1
Posted
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 😁😊😉
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
