Design comparison
SolutionDesign
Solution retrospective
All comments are welcome thank you in advance
Community feedback
- @ecemgoPosted over 1 year ago
Some recommendations regarding your code that could be of interest to you.
- If you want to make the card centered both horizontally and vertically, you'd better add flexbox and
min-height: 100vh
to the body
body { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; }
- If you use
max-width
, the card will be responsive and you can increase the width a bit - You'd better add
text-align: center
to center texts
.container { /* width: 250px; */ /* height: auto; */ max-width: 300px; text-align: center; }
- You'd better update the texts in this way:
h3 { color: hsl(218, 44%, 22%); font-weight: 700; /* padding-left: 20px; */ font-size: 20px; }
p { font-size: 15px; color: hsl(220, 15%, 55%); /* padding: 2px; */ /* text-align: center; */ padding-bottom: 20px; }
- You don't need to use
.maincon
and you can remove it
/* .maincon { height: 100vh; display: grid; place-items: center; } */
- Finally, you can remove the media queries because the solution will be responsive if you follow the steps above.
Hope I am helpful. :)
Marked as helpful0 - If you want to make the card centered both horizontally and vertically, you'd better add flexbox and
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