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 Tracy Excell
.a{fill-rule:evenodd;}techdegree seal-36
Tracy Excell
Front End Web Development Techdegree Graduate 15,333 Points

Footer not staying at the bottom of the page in a larger screen size.

I am having trouble with the footer on my friends website. It is staying at the bottom of the screen in the mobile and tablet size, but is not on a large screen size. It is jumping upwards about 30px. I have used #wrapper{ min-height 100vh;} to keep it stuck and tried the calc function, any suggestions appreciated.

<!doctype html>
<html lang ="en"> 

<head>
    <meta charset ="utf-8">
    <title>Pam Mitchell Tomatis</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/nav.css">
    <link rel="stylesheet" href="../css/normalize.css">
    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>

    <body>

<div id="wrapper"> <!--opening wrapper div-->

    <header>    
        <div class="mini-header"> <!--opening mini-header div-->
            <h3><a href="http://tomatis.co.nz/">tomatis.co.nz</a></h3>

                <a href="http://tomatis.com"><img src= "../Images/tomatis-logo.jpg" alt="Tomatis logo" id="tomatis-logo1"></a>  

                    <img src= "../Images/facebook-logo.png" alt="facebool logo" id="facebook-logo1">
        </div><!--closing mini-header div-->

             <div class="main-header">  <!--opening main-header div-->
                 <h1>Pam Mitchell</h1>
                 <h2>Tomatis</h2>
                 <h4>Auditory Theory Programme</h4>
                    <ul class="nav">
                        <li><a id="main.html">Home</a></li>
                        <li><a href="about.html">About</a></li>
                        <li><a href="contact.html">Contact</a></li>
                        <li><a href="testimonials.html">Testimonials</a></li>
                    </ul>   
                </div> <!--closing main-header div-->
              </header>

    <div class="main-content content-flex"> <!--opening main content div-->

            <img src="../Images/mobile-cover-image-bw.jpg" alt="Cover image of child listening to headphones" id="mobile-cover-image" class="relative">

             <img src="../Images/large-cover-image-bw.jpg" alt="Cover image of child listening to headphones large" id="large-cover-image" class="relative">

                <div id="content-paragraph">
                    <p>"THE TOMATIS® METHOD increases concentration, speeds up learning, improves reading, sleep and communication while reducing stress and anxiety."</p>
                        </div><!--closing content-paragraph div-->

            <a href="http://tomatis.com"><img src= "../Images/tomatis-logo.jpg" alt="Tomatis logo" id="tomatis-logo"></a>  

            <img src= "../Images/facebook-logo.png" alt="facebool logo" id="facebook-logo">

    </div> <!--closing main content div-->

    </div><!--closing wrapper div-->
        <div id="footer">
            <footer>
                <p>&copy; Pam Mitchell 2016</p>
            </footer>
        </div><!--closing footer div-->
    <script>src="dropMenu.js"</script>
    </body>

</html>

* {

    font-family: 'Lato', sans-serif;
}

* {

    box-sizing: border-box;
}



/* mini header and navigation styles*/ 

#tomatis-logo1, #facebook-logo1{
    display: none;
}

.mini-header {
    background-color: #4484cE;
    height: 3.5em;
    margin: 0;
    padding: 1px;
    color: white;
    border-bottom: 1px solid #ffa31a;

}

.mini-header h3 {
    text-align: left;  
    margin-left: .3em;
} 

.mini-header h3 a {
    text-decoration: none;
    color: white;
}

.mini-header h3 a:hover {
    color: #D9D9D9;
}

/* main header and navigation styles*/ 

.main-header {
    background-color: white;
    height: 10em;
    margin-top: -1.25em; 
    border-bottom: 2px solid #ccc;
}

.main-header h1, h2, h4 {
    text-align: center;
}

.main-header h1 {
    padding-top: .5em;
}

.main-header h2, h4 {
    color: #ffa31a;

}

.main-header h2 { 
    margin-top: -.5em;
}

.main-header h4 { 
    margin-top: -1em;
}


.nav {
    display: flex;
}

.nav {
    flex-direction: row;
    justify-content: space-between;
    max-width: 500px;
   list-style-type: none;    
}

.nav li a {

    text-decoration: none;
    color: black;
    justify-content: center;
    margin-left: -1.5em;
    margin-right: .5em;
    font-size: .8em;  
}

.nav li a:hover { 
    color: #D9D9D9;
}


/* colour styles*/ 

body {
    background-color: #D9D9D9;
}


/* main content styles*/ 

#large-cover-image {
    display: none;
}

#content-paragraph{
    display: none;
    font-style: italic;
    width: 20em;
    height: 20em;
}


#mobile-cover-image {

display: block;
margin:auto;
margin-top: 2em;
margin-bottom: 1em;
height: 45vh;
width: 70vw;
position: relative;
border: 4px solid #ccc;
border-radius: 6px;

}

#tomatis-logo, #facebook-logo{

    height: 3.5em;
    width: 3.5em;
    border: 2px solid #ffa31a; 
    border-radius: 6px;
    position: absolute;
}


#tomatis-logo{
  left: 28%;  
}


#facebook-logo{
  left: 52%;
} 

/* card content styles*/ 

.card {

  margin: 30px;
  padding: 20px 40px 40px;
  max-width: 500px;
  text-align: left;
  background: #fff;
  border-bottom: 4px solid #ccc;
  border-radius: 6px;

}

#pam-image {
  border: 2px solid #ccc;
  border-radius: 6px; 
}


/* footer styles*/ 

#footer{
    background-color: #4484cE;
    font-style: italic;
    color: white;
    border-top: 2px solid #ffa31a;
    text-align: center;
    height: 2.5em; 
    width: 100%;
    clear: both;
    display: block;
    margin-top: 0px;

}

footer p {
  margin-top: .3em;
  margin-bottom: .3em;
  padding-bottom: .5em;

}

#wrapper {
    min-height: 100vh;
}




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

     /* mini - header styles*/ 

    .mini-header{
        position:relative;
    } 

 #tomatis-logo1, #facebook-logo1{
    display:inline-block;
    position:absolute;
    top: 8px;
    width: 2.5em; 
    height: 2.5em;
    border: 1.8px solid #ffa31a;
    border-radius: 6px;

}

    #tomatis-logo1 {
        right: 12%;
    }

    #facebook-logo1 {
        right: 5%;
    }

    .mini-header {
    border-bottom: 3px solid #ffa31a;
  }


/* main header styles*/ 

.main-header {
    height: 12em; 
    margin-top: -2em;
    border-bottom: 4px solid #ccc;
}

.main-header h1 {
    font-size: 2em;
}

.main-header h2 {
     margin-bottom: 1em; 
     font-size: 1.5em;
    }

.main-header h4 {
    font-size: 1em;
    margin-bottom: 2.5em;
}

.nav li a {
    font-size: 1em;  
}
   /* main content styles*/ 

#mobile-cover-image {
        display: none;
    }

#large-cover-image {

display: block;
margin:auto;
margin-top: 2em;
margin-bottom: 1em;
height: 60vh;
width: 70vw;
position: relative;
border: 4px solid #ccc;
border-radius: 6px;
z-index: -1;
}

#tomatis-logo, #facebook-logo{
    display:  none;
}

.card {
        display: block;
        margin: auto;
        margin-top: 1.5em;
        margin-bottom: 1em;
    }



#content-paragraph{
    display: block;
    position: absolute;
    top: 19em;
    right: 3em;
    font-style: italic;
    width: 20em;
    height: 25em;
    font-size: 1em;
}


    .testimonials-content {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .testimonials-content .card {
        height: 10em;
        width: 20em;   
    }

    .about-card {
        height: 20em;
        max-width: 600px;
    }

   .contact-card .card {
        height: 20em;
        max-width: 600px;
    }




/* footer styles*/ 




}

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

 /* mini - header styles*/ 

    .mini-header{
        height: 5em;
    } 

    .mini-header h3{
        font-size: 1.5em;
    }

 #tomatis-logo1, #facebook-logo1{
    display:inline-block;
    position:absolute;
    top: 12px;
    width: 3.5em; 
    height: 3.5em;
    border: 2px solid #ffa31a;
    border-radius: 6px;

}

#tomatis-logo1 {
        right: 9%;
    }

 #facebook-logo1 {
        right: 3%;
    }

/* main header styles*/ 

    .main-header {
        height: 10em;
    }

.main-header h1{
     text-align: left;
     margin-left: .5em;
    }

.main-header h2 {
    margin-top: -2.2em;
    font-size: 1.5em;
    }

.main-header h4 {
    text-align: right;
    margin-top: -2.4em;
    margin-right: 12em;
    font-size: 1.25em;
}

  /* main content styles*/ 

#mobile-cover-image {
        display: none;
    }

#large-cover-image {

display: block;
margin:auto;
margin-top: 2em;
margin-bottom: 1em;
height: 70vh;
width: 70vw;
position: relative;
border: 4px solid #ccc;
border-radius: 6px;

}

#content-paragraph{
    display: block;
    position: absolute;
    top: 16em;
    right: 8em;
    font-style: italic;
    width: 20em;
    height: 25em;
    font-size: 1.25em;
}

   .testimonials-content .card {
        height: 15em;
        width: 30em;   
    }

     .about-card {
        height: 20em;
         max-width: 900px;
    }

   .contact-card .card {
       height: 20em;
       max-width: 900px;
    }
    /*footer styles*/ 






}

2 Answers

Trent Christofferson
Trent Christofferson
18,846 Points

try using the position property here are some examples http://www.w3schools.com/css/css_positioning.asp

Tracy Excell
.a{fill-rule:evenodd;}techdegree seal-36
Tracy Excell
Front End Web Development Techdegree Graduate 15,333 Points

Thank you, I ended up using fixed positioning.

Micheal Allen
Micheal Allen
19,311 Points
Micheal Allen
Micheal Allen
19,311 Points

It seems like your styling for #content-paragraph could be the problem as you have given it a fixed height. Try using percentage instead.

Tracy Excell
.a{fill-rule:evenodd;}techdegree seal-36
Tracy Excell
Front End Web Development Techdegree Graduate 15,333 Points

Thank you.