Design comparison
SolutionDesign
Solution retrospective
- I'm having difficulty centering the preview card inside the main tag.
- I have tried to use the transform property to change the position of the container but did not had a good result from it.
- I'm having trouble making the active state part.
- The clock icon and the ethereum icon and the text are not lined together. <br>
Please do help me to make the webpage responsive and correct my code if you have the time to do so.
Community feedback
- @techantherePosted almost 3 years ago
You don't need to use transform for this purpose. Use display flex in body, set align and justify content properties to center, this will place main content in the center. Set the body height to 100vh, the 100% of the viewport height. For hover states you can check my solution.
Marked as helpful2@ryu-kamiskiPosted almost 3 years ago@techanthere You were right about the body flex thing. I used flex on the main tag that is why it was not getting centered. Thanks for the feedback and your time to see my code, it means a lot! Thank you!
0
Please log in to post a comment
Log in with GitHub
Join 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