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 How to Make a Website Responsive Web Design and Testing Adjust the Profile Page and Header

Posted by Ryan Van Den Bos
Ryan Van Den Bos
3,447 Points

How do i get the footer to stay at the bottom of the screen?

When i view the site on desktop or tablet size on the gallery page the footer is at the bottom however on the about and contact page it is in the middle of the screen, how do i get it to stay at the bottom?

Damon Johnson
Damon Johnson
Courses Plus Student 2,775 Points

Hey Ryan,

Could you post your code so we can take a look? Or if its easier, upload it to codePen http://s.codepen.io/ and let me have the browser link to your pen

=)

Ryan Van Den Bos
Ryan Van Den Bos
3,447 Points

Hi thanks for all the responses ill include the code,

To answer your question James yes the gallery does have a larger content than the about page, all my content is placed within a wrapper which has a max width, however its height has not been specified what i want is even if there isn't enough contact for the wrapper to fill the page the height of it changes the whatever size screen its on so every page has the same look.

*MAIN CSS

a {

  text-decoration:none;
  color: #6ab47b;
}

img {

  max-width:100%;

}

#wrapper{ 
  max-width: 940px; 
  margin:0 auto;
  padding: 0 5%;
  background-color:#FFF;
  height:100%;
}

#logo{
  text-align:center;
  margin:0;
  font-family: 'Dosis', sans-serif;

}

header{
 float:left;
  margin:0 0 30px 0;
  padding:5px 0 0 0;
  width:100%;
   background:#6699FF;
  border-color:#6699FF;
}

h1{
 font-family: 'Dosis', sans-serif;
  margin:15px 0;
  font-size:2em;
  font-weight:normal;
  line-height:0.8em;
  color:#FFF;
}


h2{
  font-size: 0.75em;
  margin: -5px 0 0;
  font-weight:normal;
}

h3{
  margin:0 0 1em 0;


}


h2{

  color: #fff;
}

nav{
 background-color: #DADA47;
  text-align:center;
  padding:10px 0;
  margin:20px 0 0;
}

nav ul{
 list-style:none;
  margin:0 10px;
  padding:0;
}

nav li{
  display:inline-block; 
}

nav a{
 font-weight:800;
  padding:15px 10px;

}

nav a, nav a:visited{
 color: #fff; 
}

nav a.selected, nav a:hover{
  color: #6699FF;
}

footer{
  font-size: 0.74em;
  text-align:center;
  padding-top:50px;
  color:#ccc;
  clear:both;
  bottom:0;
}

.social{
  width:20px;
  height:20px;
  margin: 0 5px;

}

#gallery{
 margin: 0;
 padding: 0;
 list-style: none;
}

#gallery li{
 float:left;
  width:45%;
  margin:2.5%;
  background-color:#f5f5f5;
  color:#bdc3c7;
}

#gallery li a p{
 margin:0;
  padding:5%;
  font-size:0.75em;
  color:#bdc6c7;

}

body{
 background-image: url('../img2/abstract-triangle-pattern.png');
  color:#999;
  font-family:'Open Sans', sans-serif;
}



.Profile{
  display:block;
  max-width:900px;
  margin:0 auto 30px;
  border-radius:5%;

}
.contactinfo{
 list-style:none;
  padding:0;
  margin:0;
  font-size:0.9em;
}

.contactinfo a{
  display:block;
  min-height: 20px;
  background-repeat:no-repeat;
  background-size:20px 20px;
  padding:0 0 0 30px;
  margin:0 0 10px;
}

.contactinfo li.phone a{
  background-image: url('../img/mail.png');
}

.contactinfo li.email a{
  background-image: url('../img/phone.png');
}```




*RESPONSIVE CSS
``css
@media screen and (min-width: 480px){

  #primary{
   width:50%;
    float:left;
  }

  #secondary{
   width:45%;
    float:right;
  }

  #gallery li{
   width:28.3333333%;  
  }

  #gallery li:nth-child(4n){
    clear:left;
  }

  .Profile{
   float:left;
    margin:0 5% 80px 0;
  }

}


@media screen and (min-width: 660px){

  nav{
    background:none;
    float:right;
    font-size:1.25em;
    margin-right:5%;
    text-align:right;
    width:45%;
  }

  #logo{
    float:left;
    text-align:left;
    margin-left:5px;
    width:45%;
    padding-left:10px;
  }

  h1{
   font-size:2.5em;  
  }

  h2{
    font-size:0.825em;
    margin-bottom:20px;
  }

  header{
   border-bottom: 20px solid #DADA47;
    margin-bottom:60px;
  }

  nav a.selected, nav a:hover{
  color: #DADA47;
}

  .Profile{
   width: 450px;
  height:300px;
  }



}```




```HTML
*ABOUT HTML
<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Art By Eloise</title>
    <link rel="stylesheet" href="CSS/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Dosis:400,600,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="CSS/main.css">
     <link rel="stylesheet" href="CSS/responsive.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Art By Eloise</h1>
      </a>
      <nav>
        <ul>
          <li><a href="index.html" >Portfolio</a></li>
          <li><a href="about.html" class='selected'>About</a></li>
          <li><a href="contact.html" >Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
    <section>
     <img src="img2/Eloise.jpg" alt="Picture of Eloise" class='Profile'>
      <h3>About</h3>
      <p>add text here</p>
    </section>
    <footer>
      <a href="http://twitter.com/RyanVanDenBos"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social"></a>
      <a href="http://facebook.com/rvandenbos1"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social"></a>
      <p>&copy; 2014 Ryan Van Den Bos.</p>
    </footer>
      </div>
  </body>
</html>```

6 Answers

Chris James
Chris James
19,102 Points

Ok, how about trying the solution provided here

Bob Sutherton
Bob Sutherton
20,160 Points
Bob Sutherton
Bob Sutherton
20,160 Points

Ryan,

It might be adjusting to the amount of content you have on each page.

There may be enough content on the gallery page to push the footer further down.

There may be less content on the about and contact pages, so the footer isn't pushed down as far. Is this the case?

Flor Antara
Flor Antara
12,372 Points
Flor Antara
Flor Antara
12,372 Points

Hello Ryan!

There are several options for what you want to achieve, but it may depend on your markup.

Can you share the code so we can take a look and provide an accurate solution?

Chris James
Chris James
19,102 Points
Chris James
Chris James
19,102 Points

As James has said, it is probably because your contact page is not long enough to push the footer down.

You can force the footer to the bottom like this:

width: 100%;
position: fixed;
bottom: 0;

But this will make the footer sticky at the bottom of every page (ie visible all the time). Or is that the style you are looking for?

Ryan Van Den Bos
Ryan Van Den Bos
3,447 Points

Thanks Chris,

That wasn't the style i was really going for, what i really want is for the height of the wrapper to fill the page no matter what display the website is being displayed on

Flor Antara
Flor Antara
12,372 Points
Flor Antara
Flor Antara
12,372 Points

Hello Ryan! Take a look at Chris James link, I think that min-height for the 'section' is your best shot here.

Put the min-height to the tallest value of your current pages (gallery page I guess), and you'll get all heights pretty much alike.

PS: You'll need to make adjustments if it's responsive. (reset the min-height on mobile size)

Ryan Van Den Bos
Ryan Van Den Bos
3,447 Points
Ryan Van Den Bos
Ryan Van Den Bos
3,447 Points

Thanks for your replies !! you are all very helpful.