Design comparison
Solution retrospective
I'm proud of myself for finding resources where I got stuck and correcting errors along the way.
What challenges did you encounter, and how did you overcome them?I was having issues with the footer; I made the position absolute. Other minor syntax errors were caught.
What specific areas of your project would you like help with?I'd like suggestions for the positioning of the footer. If I don't use absolute, the footer moves to the right of the social links box OR on it. How can I more specifically adjust my CSS to move the footer to center just below the box?
Community feedback
- @danielmrz-devPosted 4 months ago
Hey there! ππ½ββοΈ
Congrats on completing the challenge! β
Your project looks fantastic!
Here's a tip to make it even better:
Make sure you add
min-height: 100vh
to the body in order to place the card in the middle of the page. Like this:π Apply this CSS to the body (skip position or margins to make it work correctly):
body { min-height: 100vh; display: flex; justify-content: center; align-items: center; }
About the footer, you can do this:
- Remove
position
from it; - Add
flex-direction: column
to the body; - Maybe add a little
gap
to the body so there's a space between them.
Hope this helps!
Keep up the great work!
Marked as helpful1 - Remove
- @FlashdanielPosted 4 months ago
Great work. You solution look good. I like to add to what @danielmrz-dev just said.
Your footer is outside the body tag. So Include it in the body tag the try applying @danielmrz-dev tipπ.
1
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