Design comparison
SolutionDesign
Community feedback
- @MikDra1Posted 2 months ago
I encourage you to use this technique to make the card responsive with ease:
.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 - @Jan-Dev0Posted 2 months ago
Here are a few suggestions for improvement:
- Use
display: flex
on the body to center your container both horizontally and vertically. Also, settingmin-height: 100vh
ensures that the body takes up at least the full height of the viewport, making sure your content is always centered regardless of the viewport height.
body { display: flex; justify-content: center; align-items: center; min-height: 100vh; }
- In general, itβs better to use class names rather than tags as selectors.
- Itβs also a good practice to style everything for mobile view first, use media queries with min-width, and then adjust the styles for larger screens.
Marked as helpful0 - Use
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