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

Posted by Mikaela Land
.a{fill-rule:evenodd;}techdegree
Mikaela Land
Python Web Development Techdegree Student 2,324 Points

Sticky Footer won't stick

So I'm wondering if it's something in the html file with the divs but I'm unsure.

All I know is that when I open the preview on my browser the footer is in the middle. Maybe it's to the massive size of my screen and it's supposed to do that?

Also I'm getting a red block around min-width in the @media part, perhaps I'm inputing something wrong? Not sure.

I've been fiddling around with it for a while with no success. Any ideas?

/* ================================= 
  Base Element Styles
==================================== */

* {
  box-sizing: border-box;
}

body {
    line-height: 1.6;
    color: #3a3a3a;
}

p:last-child {
    margin-bottom: 0;
}

a { 
    color: #fff;
    text-decoration: none;
}

/* ================================= 
  Base Layout Styles
==================================== */

/* ---- Navigation ---- */

.name {
  margin: 0;
}

/* ---- Layout Containers ---- */

.container {
  padding-left: 1em;
  padding-right: 1em;
}

.main-header {
    padding: 1.5em 0;
    background: #3acec2;
}

.main-footer { 
    text-align: center;
    padding: 2em 0;
    background: #d9e4ea;
}

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

@media (min-width: 769px) {

    .wrap {

    max-height: calc (100vh - 89px);
    }   

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

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

3 Answers

Hyrum Steffensen
Hyrum Steffensen
1,822 Points

I tried it on a node server and on codepen. If you want "Residents of the Best City Ever" on the bottom, it looks good to me. https://codepen.io/anon/pen/WabKbY

Mikaela Land
.a{fill-rule:evenodd;}techdegree
Mikaela Land
Python Web Development Techdegree Student 2,324 Points

Good to know!

What's codepen btw, if I may ask? I've never heard of it.

Hyrum Steffensen
Hyrum Steffensen
1,822 Points
Hyrum Steffensen
Hyrum Steffensen
1,822 Points

There are several websites such as jsfiddle where you can create projects and get immediate feedback on the look, feel and functionality of your code. They're great places to play with code like a zen sandbox. If you have an idea, you can dwell on that idea without all the setup. Treehouse Workspaces are the same basic idea but they've done a good job of simplifying the UI specific to its purpose. Both are great for sharing with others.

Mikaela Land
.a{fill-rule:evenodd;}techdegree
Mikaela Land
Python Web Development Techdegree Student 2,324 Points

Oh cool! I'll have to give it a try. Thanks for letting me in on this cool site.

Hyrum Steffensen
Hyrum Steffensen
1,822 Points
Hyrum Steffensen
Hyrum Steffensen
1,822 Points

Sweet! Glad to help out!