Footer Floating Above Bottom of Page – Themeco Community

Footer Floating Above Bottom of Page

Brent F — Mon, 16 Mar 2015 14:59:33 +0000

Hello,

I am building a website using Ethos in wordpress and am running into an issue where if there is A)not enough content on a page or B)a user is using a high-resolution/large monitor the footer bar appears to float in the middle of the screen.

I have tried locking the footer to the bottom of the page by adding the custom css to the footer


position: absolute;
width: 100%;
bottom: 0;
left: 0;

And the sort of works because it does lock the footer to the bottom of the browser window, but when viewed on mobile devices the footer takes up 70% of the window.

Is there anyway I can have the footer remain on the bottom of the browser window if there is not enough content to fill a page, and stick to the bottom of content if there is?

Current theme and plug-in versions:
X-Theme: 3.2.2
X-Shortcodes: 3.0.4

See reply for website link. Thanks!

Reply To: Footer Floating Above Bottom of Page

Brent F — Mon, 16 Mar 2015 14:59:58 +0000

This reply has been marked as private.

Reply To: Footer Floating Above Bottom of Page

Zeshan — Mon, 16 Mar 2015 16:06:16 +0000

Hi Brent,

Thanks for writing in!

Add following code under Custom > JavaScript in the Customizer:

jQuery(document).ready(function($) {
  var $main = $('.x-main'),
      $windowHeight = $(window).outerHeight(),
      $masthead = $('.masthead').outerHeight(),
      $wpbar = $('#wpadminbar').outerHeight(),
      $footer = $('.x-colophon.bottom').outerHeight() + $('.x-colophon.top').outerHeight();
 
  $main.css('min-height', $windowHeight - $masthead - $wpbar - $footer - 70);
});

Hope this helps. 🙂

Thank you.

Reply To: Footer Floating Above Bottom of Page

Brent F — Tue, 17 Mar 2015 18:20:05 +0000

Worked like a charm. Thank you so much!

Reply To: Footer Floating Above Bottom of Page

Nabeel A — Tue, 17 Mar 2015 21:57:38 +0000

Glad we could help.

Cheers!

Reply To: Footer Floating Above Bottom of Page

birender1 — Sun, 14 Jun 2015 01:15:52 +0000

Hi,

I am experiencing the same problem with my ethos theme but unfortunately this solution doesn’t work for me.
Are you able to help me with this issue please?

Birender

Reply To: Footer Floating Above Bottom of Page

birender1 — Sun, 14 Jun 2015 01:29:20 +0000

When I paste the css and java script codes in custom textbox, the footer bar takes up the entire screen space.

Reply To: Footer Floating Above Bottom of Page

Thai — Sun, 14 Jun 2015 11:14:51 +0000

Hi @Birender1,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Reply To: Footer Floating Above Bottom of Page

birender1 — Mon, 15 Jun 2015 01:27:38 +0000

This reply has been marked as private.

Reply To: Footer Floating Above Bottom of Page

Rue Nel — Mon, 15 Jun 2015 06:37:09 +0000

Hello There,

I have added your site in my host file but still can not view your X powered site. Is there any possibility that you can make it live? It would be much easier for us.

Thanks for understanding.