Design comparison
Solution retrospective
I'm struggling less with flexbox, but I can't make the footer to get fixed in the bottom, so I used padding to expand the box and throw it down. I guess there's another way to do this but I don't know how.
Community feedback
- @davidochoadevPosted over 1 year ago
If you want to fix the footer at the bottom of the page, you can consider using the following CSS code:
.attribuition { position: fixed; bottom: 0; width: 100%; }
This code targets the footer element with the class ".attribuition" and applies the following styles:
-
position: fixed;: This property sets the positioning of the element to "fixed." With a fixed position, the element is taken out of the normal document flow and remains fixed relative to the viewport, regardless of scrolling.
-
bottom: 0;: This property positions the element at the bottom of its containing element or the viewport if no containing element is specified. In this case, it sets the element to be positioned at the bottom of the viewport.
-
width: 100%;: This property sets the width of the element to 100% of its containing element. It ensures that the footer spans the entire width of the viewport.
By applying these styles to the footer element, you can achieve the desired effect of fixing the footer at the bottom of the page. This is useful when you want the footer to remain visible at all times, even when scrolling through long content.
Regards,
David Ochoa😼
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