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
Christopher Mlalazi
Front End Web Development Techdegree Graduate 17,305 PointsSticky Footer Screen Size
Why set the sticky footer inside a media query and especially at width 769px? Doesn't this mean that at widths smaller than this it wont work and we will be back to the same scrolling problem?
5 Answers
edeharrison
Full Stack JavaScript Techdegree Student 11,127 PointsHi Christopher,
The scrolling issue was only caused by setting the min-height of the wrap div to 100vh. But this was set inside the media query. So when the media doesn't apply (when the viewport is wider than 769px), the style won't take place. So no scrolling issue.
(The code below just for reference)
@media (min-height: 769px) {
.wrap {
min-height: calc(100vh - 89px);
}
}
Hope that helps,
Ede
Christopher Mlalazi
Front End Web Development Techdegree Graduate 17,305 PointsThanks Ede I was just wondering why the sticky footer is set just inside the media query but not from mobile width at the very beginning,
edeharrison
Full Stack JavaScript Techdegree Student 11,127 PointsHi Christopher,
I assume that Guil has done that because if a screen's width is less than 769px, it's more than likely that it's height won't exceed the height of the content. Therefore there won't be an issue with the footer rising up.
It's not necessary though; you could place it outside of the media query and it would work just the same.
All the best,
Ede
Christopher Mlalazi
Front End Web Development Techdegree Graduate 17,305 PointsI tried to downsize my screen and the footer shot up. But I guess It was just a demo. All the best to you too.
Jeremiah Shore
31,168 PointsChristopher Mlalazi, I think Ede's point was that you don't exactly NEED to put it outside the media query. On devices with smaller screens, the chances are much less likely of the page content being short enough to cause space between the bottom of the footer and the bottom of the viewport to appear. However, as long as there is a chance that one of the pages will be short enough to not fill the viewport, AND the code is not in the right place, then the footer will unstick. This applies to this specific example web page when narrower than 769px, but this also depends on the browser height.
Placing the sticky footer CSS in the base layout styles would fix this, and honestly, I think it's the best option because it's a more uniform design.
Christopher Mlalazi
Front End Web Development Techdegree Graduate 17,305 PointsLol, I have even forgotten what this was all about :)
Jeremiah Shore
31,168 PointsNo worries, that was mostly for me anyway lol. Working to clearly explain something technical is a great way to retain understanding!
Christopher Mlalazi
Front End Web Development Techdegree Graduate 17,305 PointsTrue Jeremiah, also reading other people’s code is a great way of retaining info. Good luck on your coding.