Docs

[Brent F]

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!

[Brent F]

This reply has been marked as private.

[Zeshan]

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.

[Brent F]

Worked like a charm. Thank you so much!

[Nabeel A]

Glad we could help.

Cheers!

[birender1]

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

[birender1]

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

[Thai]

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.

[birender1]

This reply has been marked as private.

[Rue Nel]

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.

[birender1]

The website was offline for a while. Can you please try again?
Also please make sure your hosts.ini file entry is setup without http and must start with www

Apologies for the inconvenience.

[Paul R]

Hi,

You don’t need to add the css code, you only need to the js 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);
});

Thanks

[birender1]

This reply has been marked as private.

[Paul R]

Hi,

Upon checking, I can see the the code was not working because there is a syntax error in your custom javascript code

Please remove the code that reads

<!--[if lte IE 8]>
document.write('<div style="background:red;">IE8 is not supported. You're using an UNSUPPORTED version of Internet Explorer. Please update to latest version or install Chrome, Firefox, Torch, Safari browsers.</div>');
<![endif]-->

<!--[if lte IE 7]>
alert("IE7 is not supported. You're using an UNSUPPORTED version of Internet Explorer. Please update to latest version or install Chrome, Firefox, Torch, Safari browsers.");
<![endif]-->

<!--[if lte IE 6]>
alert("IE6 is not supported. You're using an UNSUPPORTED version of Internet Explorer. Please update to latest version or install Chrome, Firefox, Torch, Safari browsers.");
<![endif]-->

Conditional comments like <!–[if lte IE 8]> will only work in css and not in js.

Thanks

[birender1]

That worked…thanks a lot for your help. You guys rock 🙂

[Author]

Posts