Design comparison
SolutionDesign
Solution retrospective
trouble with deployment among other things.
Community feedback
- @NehalSahu8055Posted over 1 year ago
Hello Coder 👋.
Congratulations on successfully completing the challenge! 🎉
Few suggestions regarding design.
➨ Remove the
commented line
in the below code of your design as this causes not properly centering your card..main_container { /* width: 1600px; */ /* height: 1000px; */ /* margin: auto; */ /* position: absolute; */ /* left: 500px; */ /*top: 110px;*/ }
➨ To properly center the container.
- USING FLEXBOX
main{ min-height: 100vh; display: flex; align-items: center; justify-content: center; }
- USING GRID
main{ min-height: 100vh; display: grid; place-items: center; }
- Use
max-width
instead ofwidth
to make your design responsive. - Use
cursor: pointer
for buttons for more user-friendly and decrease some opacity for the same.
I hope you find this helpful.
Happy coding😄
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