Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • April 9, 2017 at 6:24 pm #775062
    ping-pong

    Hello,

    recently I’ve realized that on big screens (bigger than 17”) there’s a grey box below the footer. This grey box depends on how much content there is on the page.
    Is there a possibility to adjust the empty space above the footer to the screen height so that the footer always is located at the lower end of the page and has the same height everywhere?

    Best regards.

    April 9, 2017 at 6:57 pm #775074
    Basilis

    Hi ping-pong!

    Please take a look here
    https://kriesi.at/support/topic/fixed-socket-et-footer-sticky-footer/

    and do let us know if it works out for you.

    Thank you

    Cheers!
    Basilis

    April 9, 2017 at 7:46 pm #775093
    ping-pong

    I can’t really find a working solution in there. I don’t want the footer to be sticky but to have always the same height. I’ve uploaded a screenshot for better understanding
    Footer too high

    April 9, 2017 at 10:01 pm #775132
    Vinay

    Hi,

    Please enable custom CSS class name to the empty container by placing a code snippet to your functions.php file as mentioned in this link http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    
.custom-container-height {
    height: 54vh;
}

    Best regards,
    Vinay

    April 10, 2017 at 4:34 pm #775538
    ping-pong

    Hi,

    it’s somehow working. But do I really have to apply the custom CSS class to every single page? The thing is I don’t exactly know which pages are shown with the big grey element at the buttom. Also I’d have to adapt the height to every single page depending on the length of the content, right?
    Isn’t there a way to assign a vh value to the footer? Or well, when I have a look into the developer tools of my browser then this grey element isn’t the footer, it’s nothing meaning there isn’t any code for the element…

    Best regards.

    April 13, 2017 at 6:10 am #777025
    Vinay

    Hey!

    The HTML takes up the socket color when the content is smaller than the page.
    You can try the below CSS code. This makes the footer sticky but works on all pages with a simple CSS snippet.

    #socket {
    position: absolute;
    width: 100%;
    bottom: 0;
}
#footer {
    position: absolute;
    width: 100%;
    bottom: 30px;
}

    Cheers!
    Vinay

    April 15, 2017 at 7:35 pm #778275
    ping-pong

    Thanks Vinay.

    So there isn’t any possibility to have a non-sticky footer that is always at the very bottom of the page no matter what display size?
    My problem is that on some pages the content is changing every other day. So the solution with the custom CSS class isn’t really possible…

    Best regards!

    April 16, 2017 at 11:37 am #778405
    Vinay

    Hi,

    Please remove all the custom code added to make the footer sticky at the bottom.

    We can make the main div element to stretch the height of the viewport using custom CSS.

    NOTE: Adjust the min-height value in the below code to suit your design.

    .html_minimal_header #main > .avia-builder-el-0, 
.av_minimal_header + #main .container_wrap_first {
    min-height: calc(100vh - 140px); /* 100% view port width minus the header height */
}

    Best regards,
    Vinay

    • This reply was modified 7 years, 6 months ago by Vinay.
    April 16, 2017 at 8:09 pm #778491
    ping-pong

    Hi,
    thank you.
    Unfortunately it somehow hasn’t worked. I now with the help of a friend figured something out that works
    .template-page { min-height: 67vh; }

    Regards.

    April 16, 2017 at 8:52 pm #778494
    Vinay

    Hi,

    Glad you figured it and thank you for sharing the solution :)

    Best regards,
    Vinay

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Footer height on big screens’ is closed to new replies.