Design comparison
Solution retrospective
I love the fact that i used display flex and justify content to center my items but next time i will try to use other layout technique.
What challenges did you encounter, and how did you overcome them?I found it hard to figure out the correct font sizes and weight without the figma files but i tried my best by using the images from the design folders
What specific areas of your project would you like help with?I would like to transition the profiles background colors smoothly to green
Community feedback
- @VictorKevzPosted 6 months ago
Hey, great job completing this challenge. I have a tip you might find useful when trying to center a div (in this case, the card).
Basically, you need two divs one which you can set as a "wrapper or outer-container" and then another as may be "inner-container" or profile-card(in your case).
Below is the code that would solve that for you without needing to use that margin: 100px auto; you used. You should have used min-height:100vh or dvh to make sure the card is centered vertically
.outer-container { display: flex; min-height: 100vh; justify-content: center; align-items: center; } .inner-container { /here just style the container as you see fit for example/ min-width: 300px; max-width: 400px; width: 100%; border-radius: 15px; }
If you don't want an outer-container you apply these styles to the body instead, it's up to you! I hope you find this helpful👍
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