Sticky footer not sticking to bottom of page on webpage using a template!?!

[couparconsulting]

I created a template in muse to use for a blog on our company website. It's been loading perfectly fine until today (or at least I first noticed it today). The footer is not sticking to the bottom of the page, instead it stays in the original place behind the blog content.

This is the website/blog where the issue is: http://www.couparconsulting.com/blog

How can I fix that??

Other issue is that many of the images on the blog suddenly disappeared....not sure when or how that happened but that issue isn't as crucial as the footer issue.

[couparconsulting]

anyone???

[Chad_-_ChicagoDigital_com · Accepted solution]

Hello couparconsulting,

I'm not really a Muse user but if you can get into your code I can tell you want to change.

http://jsfiddle.net/chaddidthis/JbKS3/

Basicly you need to wrap the footer copyright and footer social links into a single div, which i called .footer-wrapper. Then give that a class of: clear:both;

That will get your footer to the bottom but there are margins that push it down, so the other ID's will need to have their margin-top edited to 41px so they sit with the copyright.

Test it first on a test page so if it doesn't work you don't get any worse off.

Again I'm sorry I'm not a muse guy, but if you can just make these small edits in your code you should be good.

Hope it helps,

Chad Smith

[couparconsulting]

Hi Chad, thanks for your help. I made those edits to the template (actually a test one I created), but now the footer is at the top of the page. Maybe I missed a step?

Coupar Consulting test

[Chad_-_ChicagoDigital_com]

Hello,

Well done, almost there.

The issues now are you have duplicate footer code and the new .footer-wrapper is outside the containing div. So you need to cut out the .footer-wrapper and paste it over the other footer code. Keeping it within the #page div

[couparconsulting]

It looks like that worked! I had to update the tag numbers because I republished from muse and had applied a different master. The footer is at the bottom of the page, the only weird thing I'm noticing is that when you hover over the social media icons it does that weird double thing again, not sure how to fix that. You can see it here: Coupar Consulting test

[Chad_-_ChicagoDigital_com]

That is because on hover you have the icon moving to the right -10000px, so once it's moved you are no longer hovering on it so it comes back, then you're hovering so it moves.... and so on.

the CSS for that is on template-blog.css line 442. if you change the margin to opacity: .7; it will not flicker

Hope this helps!

[couparconsulting]

That worked! Thank you so much for your help, I really appreciate it! I think I'll be able to make these changes to the actual blog now.