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 Anne Donald
Anne Donald
9,847 Points

The footer of my page has a margin at the bottom

Hi There!

The footer of my page has a margin at the bottom and is not the same as the video... I was wondering if there is something I need to add to the CSS?

When I reduce the screen size it disappears?

Sam Donald
Sam Donald
36,305 Points

Adding your code or a snapshot to a workspace allows people to offer premium level support.

Also, if you add code take note of the Markdown Cheetsheet so it's properly formatted. ??

4 Answers

Anne Donald
Anne Donald
9,847 Points

This is what worked for me.. hope this helps anybody else who needs help with this.. (If I remember correctly the 89px was the height of the footer)

.wrap{
  min-height: calc(100vh - 89px);
}
György Varga
György Varga
19,198 Points
György Varga
György Varga
19,198 Points

Hi!

If you want to reduce your bottom marging to zero use this: footer { margin-bottom: zero; } Maybe it disappears when you reduce the screen size, because you added some media queries to the CSS files to be responsive.

Hope this helps!

Anne Donald
Anne Donald
9,847 Points
Anne Donald
Anne Donald
9,847 Points

Thank you for your quick replies, this is my css code...

* ================================= 
  Base Element Styles
==================================== */

body {
    line-height: 1.6;
    color: #3a3a3a;
/*
  width: 70%;
  margin: 0 auto;
*/
}

a { 
    color: #fff;
    text-decoration: none;
}

/* ================================= 
  Base Layout Styles
==================================== */

/* ---- Navigation ---- */

.name{
  margin: 0;
}

/* ---- Layout Containers ---- */

.container{
  width:70%;
  margin:0 auto;
}

.main-header {
    background: #3acec2;
  padding: 1em 0;

}

.main-footer {
    padding: 2em 0;
    background: #d9e4ea;
  text-align:center;
}



/* ---- Page Elements ---- */

I tried the margin-bottom: 0; but no luck?

Sam Donald
Sam Donald
36,305 Points

I don't see anything immediately there.

Browsers have differing default styles they apply to certain elements. In the video the teacher may well have a resets.css file that removes many of these.

I would open up the browsers dev tools and inspect the element. This should allow you to track down issue.

Anne Donald
Anne Donald
9,847 Points
Anne Donald
Anne Donald
9,847 Points

Thanks Sam, I really could have kicked myself as a couple of videos (or possibly one) ago, Guil showed how to create a sticky footer!