-
AuthorPosts
-
April 9, 2017 at 6:24 pm #775062
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 #775074Hi 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!
BasilisApril 9, 2017 at 7:46 pm #775093I 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 highApril 9, 2017 at 10:01 pm #775132Hi,
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,
VinayApril 10, 2017 at 4:34 pm #775538Hi,
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 #777025Hey!
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!
VinayApril 15, 2017 at 7:35 pm #778275Thanks 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 #778405Hi,
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, 8 months ago by Vinay.
April 16, 2017 at 8:09 pm #778491Hi,
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 #778494Hi,
Glad you figured it and thank you for sharing the solution :)
Best regards,
Vinay -
AuthorPosts
- The topic ‘Footer height on big screens’ is closed to new replies.