Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

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

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

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.

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

Thanks!