Home / Forums / ePix Support / Footer fitting to the content

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts

  • angelit03
    Participant

    Hi, I have a problem with the footer, it don’t stays in the bottom of the page when i have an small amount of content on it

    As you can see here: http://test.doloresmolla.com/contacto/

    The theme is fitting to the content and letting a white space on the bottom of the page

    How can I solve this issue?

    Cheers

    Andy
    Andy
    Keymaster

    Hi,

    The quickest way to resolve this would be to add the following CSS to Appearance > Theme Options > Customize > Custom CSS:

    .content-wrap {min-height:1200px;}


    angelit03
    Participant

    Hi, there’s some way to do it responsive friendly? I tried that option before, but It depends of the resolution of the webpage…

    I tried min-height:100%, but It didn’t worked, what’s going wrong there?

    Thanks in advance 🙂

    Andy
    Andy
    Keymaster

    Hi,

    Yes, keep the above CSS I provide in Custom CSS and then within the Mobile CSS field, try adding this:

    .content-wrap {min-height:0 !important;}


    angelit03
    Participant

    I didn’t explained properly, what I want is to have the footer always at the bottom of the screen, independently of the resolution, a fixed min-height in px will not adapt to the height of the screen, It will just set a fixed height making a long scroll page in most cases…

    The main idea is to set the content-wrap to 100% min-height, but that’s not working (I don’t know why), so, I just need another fix to that

    Cheers

    Andy
    Andy
    Keymaster

    Hi,

    That CSS will not work like that. It’s an age old issue with positioning footers at the bottom of pages where the content doesn’t reach. I’ve just written this bit of script – try it in Appearance > Theme Options > Customize > Javascript.

    
    <script>
    function contentHeight() {
    var window_height = jQuery('#primary-wrapper').height(),
          header_height = jQuery('#header-wrap').outerHeight(),
          footer_height = jQuery('#footer-wrap').outerHeight(),
          content_height = window_height - ( header_height + footer_height ) - 20;
    
    if( jQuery( '.site-inwrap').height() < window_height )
    {
       jQuery('.content-wrap').css( 'min-height', content_height );
    }
    else
    {
       jQuery('.content-wrap').css( 'min-height', 0 );
    }
    
    }
    
    jQuery(window).load(function() {
     contentHeight();
    });
    
    jQuery(window).resize(function() {
     contentHeight();
    });
    </script>
Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.