Hey everyone, I’m redoing my portfolio page and I am having trouble getting my footer to reach the bottom of the page. I’ve tried using height to stretch it to the bottom of the page, but I think there’s a better way to achieve what I want. I simply don’t want any space between the footer and the bottom of the web page. Here is the link to my codepen:
http://codepen.io/Jawaka72/pen/zNKXmy
In full page view, it’s clear that my footer doesn’t reach the bottom. Any thoughts on how to fix this? Thank you !
I’m not sure if you already fixed it, but if your footer is the gray div at the bottom with your links, it reaches the bottom on my screen.
I haven’t fixed it yet, and yes the gray div is my “footer” in this case. On my screen, when I change codepen’s view to full, the footer doesn’t sit right at the bottom as I’d like. In the editor view, it looks fine, but not in the full view.
See image below, I’m in full view as well. Look fine in all 3 views.
Hmmm, that’s peculiar. Maybe it’s just the monitor I’m using? It’s quite wide, 1920 X 1080, so maybe it’s just the dimensions of my monitor that is giving me a different view than what I want. I’ll try it on another device and compare the results.
Also, from looking at your screenshot, the contents of the ‘portfolio’ section ought to be align horizontally. They are aligned horizontally for me on my end.
The weirdest thing is that my resolution is the same. Nevertheless, I used chrome dev tools to change my resolution to 1920x1080, and that changed your site for me. So ignoring how weird that is, try the stuff here http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page.
Also seems to look okay in my browser. Thought I might add one other thing I noticed. I accidentally closed your codepen already so I can’t copy the code, but in your CSS there was a hover state on the .logo class in your header. The text is supposed to change to black upon hover, but it’s already black.
Just thought I would point that out in case you had still wanted an effect to happen there.
@aoganezo At my lap top now and the page in full view looks just as I want it to. The footer is against the bottom of the page. That article was helpful. Adding position: absolute gave me the desired effect, but it also stretched my footer to the right for some reason. I haven’t used the ‘position’ attribute in a while because it was giving me a headache. I’ll have to test this again tomorrow on that wider screen to make sure everything works smoothly, but thanks a lot for taking the time to help me out!
And thank you @robgaston1 for pointing that out. I am reworking my portfolio page, so I missed removing some things such as that. Appreciate it!
1 Like
