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

Posted by Dale Sellers
Dale Sellers
6,613 Points

Below 769px

I noticed that the "sticky footer" works great until the viewport goes below 769px. Trying to figure out how to make it work below 769px, ideas?

1 Answer

Steven Parker
Steven Parker
231,275 Points
Steven Parker
Steven Parker
231,275 Points

The media query ("@media") deliberately restricts the code within it to windows 769px or greater.

If you want it to work at all sizes, just remove the media query.

Dale Sellers
Dale Sellers
6,613 Points

Thanks Steven! Instead of removing the media query, I moved the .wrap class outside of the media query like this:

.wrap { min-height: calc(100vh - 89px); }

/* ================================= Media Queries ==================================== */

@media (min-width: 769px) {

.container {
    width: 70%;
    max-width: 1000px;
    margin: 0 auto;
}

}

That way, I retained width and margin properties when the media goes below 769px :)