Design comparison
SolutionDesign
Solution retrospective
Rate it!
Any tips are important to me.
Community feedback
- @hitmorecodePosted about 1 year ago
Nice good effort. I have a few tips
- You used margin on the card to place it in the middle of the page. Try to avoid doing this if not necessary. Use flexbox or css grind instead.
- Make it a habit adding
min-height: 100vh;
on the body, this will make it more responsive. - You forgot to add the font-family, you can import this from google fonts. Read the style document to see what font family to use.
/* make it a habit using css reset. this is just a simple css reset */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { --white: hsl(0, 0%, 100%); --light-gray: hsl(212, 45%, 89%); --grayish-blue: hsl(220, 15%, 55%); --dark-blue: hsl(218, 44%, 22%); } body{ background-color: var(--light-gray); min-height: 100vh; display: flex; justify-content: center; align-items: center; flex-direction: column; } .card{ /* margin-left: auto; */ /* margin-right: auto; */ /* margin-top: 10%; */ padding: 20px; width: 290px; /* the width of the card cannot be the same as the width of the image 250px */ text-align: center; background-color: var(--white); border-radius: 25px; }
If you are not familiar with flexbox or css grid, take your time to start learning it. This will be very helpful in the long run.
Colt Steele - The Ultimate CSS3 Flexbox Tutorial
- When creating your html structure, make a habit of doing it like this
<body> <main> /* everything goes in here */ </main> </body>
Marked as helpful0@NurbekMakhmudovPosted about 1 year ago@hitmorecode
Thank you very much for your advice
0
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