Design comparison
Solution retrospective
I was having making it responsive especially with the mobile version
Community feedback
- @NehalSahu8055Posted over 1 year ago
Hello Coder 👋.
Congratulations on successfully completing the challenge! 🎉
Few suggestions regarding design.
- Remove
margins
from the.container
as this will not dynamically center the card. - To properly center the card.
- USING FLEXBOX
body{ min-height: 100vh; display: flex; align-items: center; justify-content: center; }
-
or alternatively
-
USING GRID
body{ min-height: 100vh; display: grid; place-items: center; }
-
Use gradient
button:hover
-
background-image: linear-gradient(#6542FE,#342CE2);
-
Use
Semantics
for the proper design of your code.
<body> <header> <nav>...</nav> </header> <main>...</main> <footer>...</footer> wrap up .attribution div inside footer. </body>
- Use
responsive units(rem, em, %)
from next project to increase responsiveness. Explore respective use cases on google.
link.
- Use
max-width
instead ofwidth
to make your design responsive.
Generate new screenshot after making the necessary changes.
I hope you find this helpful.
Happy coding😄
Marked as helpful1@AjayfrizzyPosted over 1 year agoThanks so much although the justify-content is not working while align-items works. Also the min-height is not working fine, it taking the full height of the screen, instead of the normal content only. @NehalSahu8055
0@NehalSahu8055Posted over 1 year ago@Ajayfrizzy
You are using it in a wrong way, always use flex or grid on parent to center the child.
Marked as helpful0 - Remove
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