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
Chad Buie
Courses Plus Student 1,820 PointsHow to keep footer at the bottom on higher resolutions?
The code that worked across all resolutions:
.main-footer{ position:absolute; right: 0; bottom: 0; left 0; padding: 1rem; background-color: #efefef; text-align: center; }
7 Answers
Chad Buie
Courses Plus Student 1,820 PointsThe footer does not stay at the bottom consistently across any monitor. Even the code I added does not work at all view ports. Any accuracy on this?
Chad Buie
Courses Plus Student 1,820 PointsI think there needs to be a special setting for viewport at high resolution with the markup in the file at the end of the grid segment.
Mark VonGyer
21,239 PointsIf you are trying to force the footer to scroll down with the screen, it would be better to use a jQuery plugin.
At the moment your footer appears bottom right, but if the screen is adjusted the footer doesn't always adjust immediately. A responsive position (float:right, clear:left;) would allow your footer to stay bottom right - and adapt to changes in screen size etc.
Kevin Lozandier
Courses Plus Student 53,747 PointsHi, Chad:
The video associated with your question doesn't seem to correspond with your problem. Can you provide your code on CodePen or SassMeister for me to better help you?
Having a Macbook Pro w/ a rtina display, I don't recall experiencing problems applying the ideas involving absolute or fixxed positioning often associated with footers being fixed & the "sticky footer" technique often used for footers dependent on being properly viewed that way because of other floated elements before it.
I would not depend on jQuery for such a problem absentmindedly, especially if it's the only reason why you're thinking of including it.
Chad Buie
Courses Plus Student 1,820 PointsHonestly, it was the files attached at the end of the grid video. I was really let down to see that template not work at all in a consistent format. I don't think I will be taking another CSS course here. I feel liked I wasted a week of my time, because I have no confidence in the concepts taught.
Kevin Lozandier
Courses Plus Student 53,747 PointsAs far as confidence in the material covered in the course, sorry to hear you aren't yet confident applying the concepts of the course yet beyond the code provided by the course.
My advice is to keep at it, regardless of where it takes you on & off Treehouse Island; there's no shame rewatching the course videos, rereading the material provided in teacher notes, and seeking alternate takes of the same material covered throughout the course—especially if it caters to a different learning style approach than the contents of this course encouraged (project-based learning).
Kevin Lozandier
Courses Plus Student 53,747 PointsChad Buie: I opened the file and couldn't reproduce the problem; redownloading the project files since I personally took the course long ago a few moments ago, I couldn't reproduce the problem with the latest version of the files.
I viewed the template on Microsoft Edge, along with the the latest versions of Chrome, Firefox, & Safari.
Can you provide a screenshot of what you're seeing, as well as what browser & information about your HiDPi screen to better understand where you're coming from as far as having issues of the template rendering for you as it's demonstrated in the video?
Patrick Olvera
6,339 PointsI was having the same problem so I did some searching and found a pretty simple solution. It requires that you have the 4 following divs. I didn't add the header div though, I simply added the id to my header element and the effect was the same. Make sure that the wrapper div is right against the body element otherwise this won't work.
'''html <body> <div id="wrapper"> <div id="header"></div> <div id="content"></div> <div id="footer"></div> </div> </body> '''
'''css
wrapper {
min-height:100%;
position:relative;
}
header {
}
content {
padding-bottom:80px; /* Height of the footer element */
}
footer {
width:100%;
height:80px;
position:absolute;
bottom:0;
left:0;
padding-top: .8rem;
} '''
Kevin Lozandier
Courses Plus Student 53,747 PointsKevin Lozandier
Courses Plus Student 53,747 PointsIf you intended for the footer to be on the bottom at all times like the header with a nuanced effect of it always being in view regardless of scroll, you meant
position: fixed;(if that wasn't clear with previous videos about positioning that was part of the course that was a prerequisite to this course & summarized at certain points in this course).