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

Liat Hoffman
Liat Hoffman
9,316 Points
Posted by Liat Hoffman
Liat Hoffman
9,316 Points

The sticky footer doesn't work when you narrow the viewport

Here is the HTML from the project:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Best City Guide</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="wrap">
   <header class="main-header">
        <div class="container">
            <h1 class="name"><a href="#">Best City Guide</a></h1>
            <ul class="main-nav">
                <li><a href="#">ice cream</a></li>
                <li><a href="#">donuts</a></li>
                <li><a href="#">tea</a></li>
                <li><a href="#">coffee</a></li>
            </ul>
        </div>
    </header>

    <div class="container">
        <h2>Welcome!</h2>
        <p>Everything in this city is worth waiting in line for.</p>
        <p>Cupcake ipsum dolor sit. Amet chocolate cake gummies jelly beans candy bonbon brownie candy. Gingerbread powder muffin. Icing cotton candy. Croissant icing pie ice cream brownie I love cheesecake cookie. Pastry chocolate pastry jelly croissant.</p>
        <p>Cake sesame snaps sweet tart candy canes tiramisu I love oat cake chocolate bar. Jelly beans pastry brownie sugar plum pastry bear claw tiramisu tootsie roll. Tootsie roll wafer I love chocolate donuts.</p>
    </div>
  </div>
    <footer class="main-footer">
        <span>&copy;2015 Residents of The Best City Ever.</span>
    </footer>
</body>
</html>

I added the CSS calc function as directed in the video:

@media (min-width: 769px) {
  .container {
    width: 70%;
    max-width: 1000px;
    margin: 0 auto;
  }
  .wrap {
    min-height: calc(100vh - 89px);
  }
}

This seems to work until a breakpoint - the footer is sticky as long as you do not narrow the viewport too much. The second I hit 132px width, the "sticky footer" jumps up to the middle of the page. How do you fix this?

Thanks!

Arikaturika Tumojenko
Arikaturika Tumojenko
8,897 Points
Arikaturika Tumojenko
Arikaturika Tumojenko
8,897 Points

I have the same issue. When I make the viewport smaller, the footer goes towards the header.

Arikaturika Tumojenko
Arikaturika Tumojenko
8,897 Points
Arikaturika Tumojenko
Arikaturika Tumojenko
8,897 Points

Reading a few more answers, the way the code behaves makes sense. The footer is sticky only when you don't narrow the viewport because this is how we set it in the media queries. For the footer to be sticky on all screen sizes we must place the CSS outside the media queries.

2 Answers

Erik Nuber
Erik Nuber
20,629 Points
Erik Nuber
Erik Nuber
20,629 Points

The problem I believe is with the @media rule. It is stating that what is done within that rule will only happen if the browser is 769px or greater.

You can try changing the rule or adjusting it with different @media for smaller screen widths and redoing the min-height calculation.

You could always test this quickly by changing min-width to max-width and you should have the opposite effect happening.

Arikaturika Tumojenko
Arikaturika Tumojenko
8,897 Points
Arikaturika Tumojenko
Arikaturika Tumojenko
8,897 Points

Yes, that's true. The issue is the @media rule. If you place the styling outside media queries, the footer is sticky at all times.

Liat Hoffman
Liat Hoffman
9,316 Points
Liat Hoffman
Liat Hoffman
9,316 Points

Thanks for the advice!! Placed the style outside the media query and now it is sticky at all viewport sizes.