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

Brandon Brigham
Brandon Brigham
3,716 Points
Posted by Brandon Brigham
Brandon Brigham
3,716 Points

Why is there a massive amount of white space below my footer on mobile version?

Hello guys,

This site I'm working on can be found here: http://7df.22a.myftpupload.com/

If you look at it through a mobile device or make your browser window 'hot-dog-style' below the footer at the very bottom there is a massive amount of white space and I can't seem to figure out why or where that is coming from. Any ideas? Thanks!

3 Answers

Christian Frick
Christian Frick
14,586 Points
Christian Frick
Christian Frick
14,586 Points

Here is the solution, change height to max-height.

@media (max-width: 1024px)
body, html {
/* height: 100%!important; */
overflow: auto!important;
max-height: 100% !important;
}
Brandon Brigham
Brandon Brigham
3,716 Points
Brandon Brigham
Brandon Brigham
3,716 Points

Hi Christian,

I tried your method but that didn't change anything. It's only on mobile that it does this so max-width of 480px or so. I tried it within a media query of 480px as well and nothing changed.

Christian Frick
Christian Frick
14,586 Points
Christian Frick
Christian Frick
14,586 Points

If i change it on the Browser with Chrome DEV-Tools it works like a charm.

Can't test it on Mobile.

Try to set only one overflow:auto, you got it on html & body.

Brandon Brigham
Brandon Brigham
3,716 Points
Brandon Brigham
Brandon Brigham
3,716 Points

Christian,

Thanks for your help. Is there anyway you could send me a screenshot just so I can be sure we are talking about the same thing? Thanks!

Brandon Brigham
Brandon Brigham
3,716 Points
Brandon Brigham
Brandon Brigham
3,716 Points

Damn, I must be doing something wrong cause it still isn't working on my end. Once you hit that 1024px screen size that footer just drops and that white space is there. .. hmmmm...

Christian Frick
Christian Frick
14,586 Points
Christian Frick
Christian Frick
14,586 Points

Cause you didn't change the height: 100% to max-height:100% on the screensize 1024px ;)

Brandon Brigham
Brandon Brigham
3,716 Points
Brandon Brigham
Brandon Brigham
3,716 Points

Yes! Christian! You're the man!!!

Devin Scheu
Devin Scheu
66,191 Points
Devin Scheu
Devin Scheu
66,191 Points

Well, the footer by default has margins and padding's add by the browser, you could try to setting the top padding and margin to zero and that might make it smaller.

footer {
     margin-top: 0px;
     padding-top: 0px;
}

Hope this helps!

tunis dehas
tunis dehas
4,863 Points
tunis dehas
tunis dehas
4,863 Points

Hi all, I have the same issue, I have a big space under my footer when I m on a mobile version . I tried your solution, but it doesn't work for me Please could you help me please?` http://teamtreehouse.com/workspaces/2163462#