Gilbert Koomson• 260
@Gilbert-Koom
Posted
Ok thanks for your feedback
0
Design comparison
Solution retrospective
What are you most proud of, and what would you do differently next time?
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
Victor• 1,200
@VictorKevz
Posted
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