Abdul Khaliq 🚀• 72,660
@0xabdulkhaliq
Posted
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
- I have other recommendations regarding your code that I believe will be of great interest to you.
CSS 🎨:
- Looks like the
<footer">element has been placed bottom usingmargin. So let me explain, How you can place the component at bottom with usingfixedpositioning forfooter
- Luckily you already used
Flexlayout ofcssto center the component, So you just want to addfixedposition for<footer>element to place it in bottom of the page
.attribution {
position: fixed;
bottom: 1em;
}
- Now remove these styles, after removing you can able to see the changes
.attribution {
margin: 4rem 0;
}
- Now your component has been properly at bottom
.
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
0
Welliton San• 170
@Kira-Sann
Posted
não funciona sua dica, o footer fica fixo na tela e fica sobrepondo o conteúdo da pagina se der zoom e em telas menores
@0xAbdulKhalid
0
Abdul Khaliq 🚀• 72,660
@0xabdulkhaliq
Posted
@Kira-Sann The code i shared above is for Desktop devices
Here is the corrected code which may work fine for both Desktop & Mobile devices.
- First add these to
body
body {
position: relative;
}
- Then add these to
footer
footer {
position: absolute;
bottom: 1em;
}
- Now your footer will not be overlapped with the component. cheers
PS: Do you know english or not ?, cuz i want to use translators to translate
Hope you find this feedback helpful!
0
