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
Cliff Gilchrist
1,226 Pointsthere is barely any space btwn the section and footer on all the pages, what did I miss?
Like the footer isnt sitting on the bottom of the page, its close to the sections tags
7 Answers
Jacob Mishkin
23,118 Pointscan you post your code that you are having trouble with. That way we can help out a lot easier.
Cliff Gilchrist
1,226 Pointshere is the html:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Cliff Gilchrist | Designer + Programmer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Cliff Gilchrist</h1> <h2>Designer + Programmer</h2> </a> <nav> <ul> <li><a href="index.html" class="selected">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <ul id="gallery"> <li> <a href="img/numbers-01.jpg"> <img src="img/numbers-01.jpg" alt=""> <p>Experimentation with color and texture.</p> </a> </li> <li> <a href="img/numbers-02.jpg"> <img src="img/numbers-02.jpg" alt=""> <p>Playing with blending modes in Photoshop.</p> </a> </li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>Tryingto create an 80's style of glows.</p> </a> </li> <li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt=""> <p>Drips created using Photoshop brushes.</p> </a> </li> <li> <a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt=""> <p>Creating shapes using repetition.</p> </a> </li>
</ul>
</section>
<footer>
<a href="http://twitter.com/c_gilchrist"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<a href="http://facebook.com/cliff.gilchrist.9"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
<p>© 2015 Cliff Gilchrist.</p>
</footer>
</div>
</body>
</html>
Cliff Gilchrist
1,226 Pointsand here is the css:
/**************************************** GENERAL *****************************************/
body { font-family: 'Open Sans', sans-serif; }
wrapper {
max-width: 940px; margin: 0 auto; padding: 0 5%; }
a { text-decoration: none; }
img { max-width: 100%; }
h3 { margin: 0 0 1em 0; }
/**************************************** HEADING *****************************************/
header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }
logo {
text-align: center; margin: 0; }
h1 { font-family: 'Changa One', sans-serif; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height: 0.8em; }
h2 { font-size: 0.75em; margin: -5px 0 0; font-weight: normal; }
/**************************************** NAVIGATION *****************************************/
nav { 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; }
/**************************************** FOOTER *****************************************/
footer { font-size: 0.75em; text-align: center; clear: both; padding top: 50px; color: #ccc; }
.social-icon { width: 20px; height: 20px; margin: 0 5px; }
/**************************************** PAGE: PORTFOLIO *****************************************/
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: #bdc3c7; }
/**************************************** PAGE: ABOUT *****************************************/
.profile-photo { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 30px; }
/**************************************** COLORS *****************************************/
/* site body */ body { background-color: #fff; color: #999; }
/* green header */ header { background: #6ab47b; border-color: #599a68; }
/* nav background on mobile */ nav { background: #599a68; }
/* logo text */ h1, h2 { color: #fff; }
/* links */ a { color: #6ab47b; }
/* nav link */ nav a, nav a:visited { color: #fff; }
/* selected nav link */ nav a.selected, nav a:hover { color: #32673f; }
Jacob Mishkin
23,118 Pointsif you look at the html you closed your last section tag and then open a footer tag with nothing in between the two tags. so this will have the section tag end and the footer begin. if you want space between the two you can either add html in between the last section tag and the footer or you can add some margin-top in the CSS for the footer element.
footer { margin-top: 25%; } or you have use px's as well. I hope that helps.
Jacob Mishkin
23,118 Pointsalso your wrapper div ends after your footer element. there might be space at the bottom of the viewport because of this. try playing around with it. maybe the wrapper div can end prior to the footer element. or add a max-width of 100% to the wrapper div.
Cliff Gilchrist
1,226 Pointsthanks a ton! ill check out all of that and play around with it a little.
Jacob Mishkin
23,118 PointsNot a problem! good Luck!