Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Layout Basics Getting Started with CSS Layout Creating a Sticky Footer

Andrew Swift
Andrew Swift
6,600 Points

Sticky Footer for all screen sizes.

Wouldn't you want to define your sticky footer with the .wrap element before your media queries in order to ensure the footer "sticks" while being viewed on all screen sizes?

It seems more logical to me, thus I did move my declaration from inside the media query to inside the base layouts section of my css, before the media queries. Now my footer is sticky within all sized viewports.

Please let me know if Guil placed it in the media query and not like this for some particular reason that may mess me up later on down the road, or if he just placed it in the media query to help show the different things you can do with screen breakpoints.

2 Answers

Remember that this type method only applies to footers with fixed heights.

4:41 This method works great if your footer has a fixed height. 4:45 In later courses, you'll learn how to create a flexible sticky footer 4:48 using more advanced CSS layout properties.

When you resize to smaller screen sizes, the footer looks really big and "unnecessary". You might even want to remove the footer's background-color and adjust the font-size of the footer text for aesthetic purposes.

I guess this is the reason why Guil placed this method at the 769px breakpoint as the footer "fits" the look of the page aesthetically.

Andrew Swift
Andrew Swift
6,600 Points

Hey Dennis thanks for the response.

I wasn't even thinking about the fixed height aspect of the demonstration. Thank you for pointing out that he did state that in the video. I understand the core concept of the lesson but was looking past the aesthetic reasoning.

I just started the flexbox layout course so I'm sure I'll figure out the best practice for creating flexible sticky footers soon enough.

Thanks again, Andrew

No problem. :)