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 CSS Layout Basics Getting Started with CSS Layout Creating a Sticky Footer

Daniel Grieve
Daniel Grieve
6,432 Points
Posted by Daniel Grieve
Daniel Grieve
6,432 Points

media query calc function no effect. Also cannot overwrite previous styles.

My html is as follows

<!DOCTYPE html>
<html>
  <head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Gallery</title>
    <link rel = 'stylesheet' href = 'C:/Users/lenovo/Documents/Practice code/normalize.css'>
    <link rel = 'stylesheet' href = 'gallery.css'>


  </head>
  <body>

    <div class = 'wrap'>

      <h1 class = 'main-heading'>Image Gallery</h1>

      <div class = 'gallery'>

        <a href='https://placeimg.com/640/480/any'>
          <img src='https://placeimg.com/640/480/any'>
        </a>
        <a href='https://placeimg.com/640/480/any'>
          <img src='https://placeimg.com/640/480/any'>
        </a>
        <a href='https://placeimg.com/640/480/any'>
          <img src='https://placeimg.com/640/480/any'>
        </a>
        <a href='https://placeimg.com/640/480/any'>
          <img src='https://placeimg.com/640/480/any'>
        </a>
        <a href='https://placeimg.com/640/480/any'>
          <img src='https://placeimg.com/640/480/any'>
        </a>
        <a href='https://placeimg.com/640/480/any'>
          <img src='https://placeimg.com/640/480/any'>
        </a>
        <a href='https://placeimg.com/640/480/any'>
          <img src='https://placeimg.com/640/480/any'>
        </a>

        <a href='https://placeimg.com/640/480/any'>
          <img src='https://placeimg.com/640/480/any'>
        </a>
        <a href='https://placeimg.com/640/480/any'>
          <img src='https://placeimg.com/640/480/any'>
        </a>

        <a href='https://placeimg.com/640/480/any'>
          <img src='https://placeimg.com/640/480/any'>
        </a>

      </div>
       <!-- end gallery div   -->



      <div class = 'text'> 
        <h3>My gallery</h3>
        <p >Behaviour we improving at something to. Evil true high lady roof men had open. To projection considered it precaution an
        melancholy or. Wound young you thing worse along being ham. Dissimilar of favourable solicitude if sympathize middletons
        as by resources. Remember outweigh do he desirous no cheerful.
       merous unlocked
        you perceive speedily. Affixed</p>

      </div>

    </div> 
    <!--end wrap div -->
  </body>

  <footer>
  <p>copyright n stuff like that</p>

  </footer>


</html>

My CSS is as follows

*{box-sizing: border-box}


h1 {
    text-align: center;
    color: forestgreen;
    background-color: lightgray
}

.gallery {
    width: 90%;
    margin: 0 auto;
    padding: 0 10% 0 10%;

}

a { text-decoration: none;}

.gallery img {
   width: 16%;
   height: 100px;
    padding: 5px;
    filter: grayscale(100%);

}

.gallery img:hover {
    filter: grayscale(0%);
    transition: 1s;
}

.text {
    padding: 1em;
    width: 100%
}

footer p { background-color: grey;
                margin: 0 0;}

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

@media (min-width: 500px) {
    p {
        background-color: lightgreen;
        margin: 0;
    }

    .text {
        width: 80%;
        padding: 1em;
        max-width: 1000px;
        margin: 0 auto;
    }

   .wrap {

        min-height: calc(100vh - 18px);
    }        
}

Whatever I do there is still some vertical space below the footer. .wrap media query responds to color changes but this min-height function does nothing. The 18px is the height of my paragraph element in the footer.

Playing around for testing purposes with body { max-height: 50vh} does nothing at all.

I also intended to change the color of all paragraphs with the p tag but this does not extend to the paragraph inside the footer. While I can fix this with footer p I thought this was unnecessary.

1 Answer

Austin Whipple
Austin Whipple
29,725 Points
Austin Whipple
Austin Whipple
29,725 Points

The spacing below issue may not be related to your calc(), but may be some default browser styling causing problems. Try removing any margin and padding from the body element:

body {
   margin: 0;
   padding: 0;
}

I tried that out in CodePen and it seemed to achieve what you were after.

Regarding the paragraph color change, browsers will generally give the most specific CSS selector priority when determining which to render. In your case footer p is more specific than p, so will apply that even if a media query changes the overall p styles.

Daniel Grieve
Daniel Grieve
6,432 Points
Daniel Grieve
Daniel Grieve
6,432 Points

Thanks for the reply. The selector priority aspect makes sense. The margin and padding tip did not work though, unfortunately.

Austin Whipple
Austin Whipple
29,725 Points
Austin Whipple
Austin Whipple
29,725 Points

Interesting! There's one more strange thing that may be doing it: Try removing the empty line in the .wrap styles. Usually whitespace doesn't matter, but in my fix I took it out.

Daniel Grieve
Daniel Grieve
6,432 Points
Daniel Grieve
Daniel Grieve
6,432 Points

No luck. I decided to strip everything back (also removed CSS reset). My code is now as follows. There is still a vertical scroll.

html

<!DOCTYPE html>
<html>
  <head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Gallery</title>
    <link rel = 'stylesheet' href = 'gallery.css'>   
  </head>
  <body>
      <div class = 'wrap'>
        <h1 class = 'main-heading'>Image Gallery</h1>
      </div>   <!--end wrap div -->
   </body>

  <p>copyright n stuff like that</p>

</html>

CSS

 body {
    margin: 0;
    padding: 0;
 }


@media (min-width: 500px) {
    p {
        background-color: lightgreen;
        margin: 0;
    }

   .wrap {min-height: calc(100vh - 18px);
    }        
}
Daniel Grieve
Daniel Grieve
6,432 Points
Daniel Grieve
Daniel Grieve
6,432 Points

Ok, fixed it. I noticed the size of HTML didn't equal the body. Turns out the heading had a margin which interfered with the top of the page. Thanks for your help.