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 Kyle Dougherty
Kyle Dougherty
5,233 Points

Footer only sticking when the screen is maximized

I've read through all the other questions and my HTML/CSS seems to line up with the correct answers - but its still not working.

Any feedback?

<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>

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

@media (min-width: 769px) {

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

  .container {
        width: 70%;
        max-width: 1000px;
        margin: 0 auto;
    }
}
Carl Sergile
Carl Sergile
16,570 Points
Carl Sergile
Carl Sergile
16,570 Points

I don't see you targeting the footer in your css. What exactly are you trying to do here?

2 Answers

Jenny Olsen
Jenny Olsen
2,099 Points
Jenny Olsen
Jenny Olsen
2,099 Points

I think you want the .wrap styles to apply no matter what the screen size is? If so, just move it outside the media query. Right now the min-height is only being applied on screens that are more than 769px wide. Anything smaller and the height will only fit the content.

Kyle Dougherty
Kyle Dougherty
5,233 Points
Kyle Dougherty
Kyle Dougherty
5,233 Points

There we go - I had it in the wrong spot.

Thanks!