Design comparison
Solution retrospective
- How do you make a footer containing some text that sticks to the bottom?
Community feedback
- @siavhnzPosted about 2 years ago
Hello Dan, congrats on completing first challenge
About your question
Stephanie Eckles
has a great article that I used in my challenge today.Here's the article link: Keep the footer at the bottom: Flexbox vs. Grid
Happy coding.
Marked as helpful2 - @correlucasPosted about 2 years ago
👾Hello Dan, congratulations for your first solution! 👋 Welcome to the Frontend Mentor Coding Community!
You've a great solution and a great start. I've some tips for you: to avoid the accerror you need to add ever one
h1
to wrap the main title of the page, I know this is a component but anyways requires one h1. It's better you give apadding-bottom: 40px
or usegap: 40px
to separate the container from the attribution or useposition: absolute
to make it get positioned bottom with bottom 0. And reduce the html structure removing unnecessary div, you ca wrap all content in a single div.✌️ I hope this helps you and happy coding!
Marked as helpful1 - @PhoenixDev22Posted about 2 years ago
Hi Dan,
Congratulation on completing your first challenge. Your solution looks great. I have some suggestions regarding your solution if you don’t mind:
- You should use
<footer>
for attribution. HTML5 landmark elements are used to improve navigation experience on your site for users of assistive technology.
- Page should contain
<h1>
. In this challenge , it’s supposed to be a part of a whole page, so to tackle the accessibility issue you may use<h1>
withsr-only
class hidden visually and present for assistive tech users.
- In my opinion, the alternate text should indicate where the Qr code navigate the user : like
QR code to frontend mentor
.
- Add
min-height: 100vh
instead ofheight: 100vh
to the body that let the body grows taller if the content outgrows the visible page instead.
width:320px;
an explicit width is not a good way to have a responsive layout. Consider usingmax-width
to the card inrem
instead.
Hopefully this feedback helps.
Marked as helpful1 - You should use
- @JonathanSamaelPosted about 2 years ago
'''How do you make a footer containing some text that sticks to the bottom?'''
You can use the property: footer { position: absolute; ( To make the footer or div float) bottom: 0; (keeps the element glued down) /* After that, you can centralized. */
}
Marked as helpful1
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