Design comparison
Community feedback
- @correlucasPosted about 2 years ago
๐พHello Saadi, congratulations for your first solution and ๐ welcome to the Frontend Mentor Coding Community!
Your first solution is just great and the component design is perfect! Two things you can improve in your solution. One is the shadow that is a bit dark and other is the alignment.
To create a smooth shadow you need to give it less
opacity
and moreblur
hereโs a good value for this shadowbox-shadow: 5px 7px 12px 5px rgb(0 0 0 / 7%);
To make the vertical alignment, first of all remove the
margin
and add to thebody
min-height: 100vh
to make the body display 100% of the browser screen size anddisplay: flex
eflex-direction: column
to align the child element (the container) vertically using the body as reference.Here's your code fixed and the container aligned:
main { min-height: 100vh; /* margin: auto; */ /* width: 50%; */ padding: 10px; display: flex; align-items: center; justify-content: center; }
๐ I hope this helps you and happy coding!
Marked as helpful0 - @KenbakPosted about 2 years ago
Hello Saadi,
You can also use this code to center the elements:
body { min-height: 100vh; display: grid; place-content: center; }
The card also looks a bit small, you might want to make it bigger! It's a great idea to have added a bit of shadow, but you might want to make it a tiny bit less visible. Congrats on your first challenge!
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