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 Ryan Hellerud
Ryan Hellerud
3,635 Points

wierd spacing at footer

so the site im developing has a new wierd spacing on the footer now and I can't seem to find whats causing it. I added some elements to the header and it seems to have caused the footer to act a fool. THe link is www.new.omegadesignla.com and its just the little white space at the bottom of the footer. Can anyone see what might be causing it? Here is some of the scss:

html,
body {
    margin:0;
    padding:0;
    height:100%;
}
#wrapper {
    min-height:100%;
    position:relative;
}
header {
    padding:10px;
    background:#EFDECD; //#5ee;
//    text-align: center;

}

#content {
    padding:10px;
    // padding-bottom:80px;   /* Height of the footer element */
}
footer {
    display: block;
    width:100%;
    height:5em;
    position:absolute;
    bottom:0;
    left:0;
    background:#EFDECD; //#EFDECD
    text-align: center;
    overflow: hidden;
    a{
        padding: .75rem;
       // position:relative;
        top: 1.5em;
        display: inline-block;
        font-size: .72rem;
    }
    p{
        font-size: .72rem;
    }
}

video{
    width: 100%;
    height:auto;
}
.label{
margin-left: .5em;
    margin-right: .5em;
}
table{
font-size: .75em;
}

.panel.callout a:not(.button):hover{
  color: $anchor-font-color-hover;
}
.headtext{
display:inline-block;
    font-size:3em;
    margin-left: 1.5em;
    text-align: center;
    font-family:"Courier New";
    font-weight: bold;
    margin-left: 6em;
    margin-right: 7em;
}
.img2{
   // max-height: 20%;
    max-width: 25%;
    float:right;
    display:inline-block;
   }

.accorborder{
border: black dotted 1px;
}
h6{font-weight: bold;}

3 Answers

Colin Marshall
Colin Marshall
32,861 Points

Try removing the following from your footer's CSS.

position: absolute;
bottom:0;
left:0;
Ryan Hellerud
Ryan Hellerud
3,635 Points
Ryan Hellerud
Ryan Hellerud
3,635 Points

i removed a 'br' and it seems to have worked.

Michael Arends
Michael Arends
27,513 Points
Michael Arends
Michael Arends
27,513 Points

On app.css line 23458 has "footer p {font-size: .72rem}" When I disabled that your text became larger and the spacing issue seemed to disappear. If you need to have the font size that small then I can keep looking for another solution.