Design comparison
Solution retrospective
The only question I have is what is the best or way to keep the footer at the bottom but that doesn't overlap content either?
Community feedback
- @PhoenixDev22Posted about 2 years ago
Hi David Chavez,
Congratulation on completing another challenge. your solution looks great. I have some suggestions regarding your solution if you don’t mind:
line-height: 1.8rem;
Use a unitless line-height value to Avoid unexpected results due to inheritance behavior. You can read more in mdn
Aside these , great work! Hopefully this feedback helps
Marked as helpful0 - @Delian21Posted about 2 years ago
Hello, David. Try using -
footer{ position: fixed; bottom: 0; width: 100%; height: 60px; }
I hope that answers your question.
Marked as helpful0 - @DavidMorgadePosted about 2 years ago
Hello David, congrats on finishing the challenge!
I would recommend you to remove the
padding
from your body and align to the center your component using flexbox on the body like this:body { display: flex; justify-content: center; align-items: center; flex-direction: column; min-height: 100vh; }
With this you will get your component fully centered by flexbox!
And to answer your question, if you want to keep the footer at the bottom of the page, you can use
position: absolute; bottom: 1rem;
and it will push your footer to the bottom of the page without overlapping the content of your component.Try those changes and tell me how it goes, I hope this feedback helps you for future challenges too! Good job.
Marked as helpful0@codeDavidCPosted about 2 years ago@DavidMorgade Thanks for your insight! Ill make the necessary changes. 👍
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