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
William Owens
8,668 PointsSticky footer won't implement with 2nd media query.
My sticky footer is working fine under 769 px and under 1025 px but when the screen reaches and exceeds the 1025px mark with the 2nd media query the footer pops up from the bottom about an inch. I've tried debugging with no success. Would someone mind taking a look? https://w.trhou.se/x9jm6lt39a
2 Answers
Alexander Acker
18,123 PointsApplying a media type to your media query should do the trick.
@media and screen (min-width: 1025px){
}
You can also use "all" instead of screen for all media types if you prefer.
William Owens
8,668 PointsAlexander Acker thanks! "all" worked!
Ivo Vieira
5,443 PointsIvo Vieira
5,443 PointsFor me it didn't work, it messed up my layout. Unless I'm missing something about your tip... (I just added "and screen" to the already existent media query.
What worked for me was to add, outside all media queries:
.wrap { min-height: calc(100vh - 89px); }
In the HTML it is also necessary to add a div, with the class wrap, right after the <body> with the closing div tag just before the footer element.
I also removed the property "margin-top: 30px" from the ".main-footer {}", right above "Page elements".
https://w.trhou.se/6oqm7sjt7f