-
AuthorPosts
-
March 15, 2017 at 5:06 pm #761505
Hello,
We have a website with limited content. So our pages are short.
Is it possible to force the footer to the bottom of the screen when the page is short.
Sometimes white space becomes visible after the footer because of the short pages.March 15, 2017 at 5:48 pm #761534Hey Wolf,
You can try to add a “Color Section” to the layout. Then use the “Section Minimum Height” option: http://www.clipular.com/c/6248100729454592.png?k=uv9y0eTazC1ex3LFe6HcMsFLH14 to set a minimum height for the content section. This height will be applied regardless of the content height. If the page is an archive page (i.e. shop page or post) you can’t set a minimum height for the content. In this case you either need to add more content or the footer/socket area will be bigger.
Best regards,
Jordan ShannonMarch 16, 2017 at 9:26 am #761783is it possible to force the contect of a color section to the top because now it centers in the middle.
March 16, 2017 at 9:30 am #761785Hi!
Please provide us a URL of the site, so we can take a look and try help you out with it.
Thanks a lot
Cheers!
BasilisMarch 16, 2017 at 2:07 pm #761910link in the private content
March 16, 2017 at 2:41 pm #761932Hi,
Can you include admin credentials as well?
Best regards,
Jordan ShannonMarch 16, 2017 at 2:44 pm #761936in the private content
March 16, 2017 at 5:57 pm #762089I added the following to quick css:
.template-page.content.av-content-full.alpha.units{ vertical-align: top !important; }
It seems to have fixed the the content so it is no longer in the middle. Let me know if this is what you needed.
Best regards,
Jordan ShannonMarch 16, 2017 at 7:37 pm #762130Hi,
To force your footer to the bottom of the screen, add these custom CSS codes at Enfold Theme options > General Styling > Quick CSS
#top { position: relative; min-height: 100%; } #footer { position: absolute; bottom: 0; left: 0; width: 100%; }
To affect a specific page, replace the #top id for an exclusive body class that each page has. -> check here: http://prntscr.com/ekrt8r
Let me know if it works :)
Best regards,
John Torvik- This reply was modified 7 years, 9 months ago by John Torvik.
March 17, 2017 at 11:35 am #762415This breaks the pages, the footer gets placed very very high on the page.
March 17, 2017 at 11:37 am #762416Jordan Shannon’s work seems to have solved it at least on the homepage, I will test and get back to you
March 17, 2017 at 11:49 am #762422Hi,
Great! Please let us know if run into further issues.
Best regards,
Jordan ShannonMarch 17, 2017 at 12:30 pm #762439When I have the content-section for the image set to 25%
and the content seciton for the text to 75% to footer gets pushed down to far. The footer doesn’t start under the fold but a bit further down.
Is it possible to get the footer to start right after the fold. (on pages that don’t have enought content to fill the screen)March 17, 2017 at 3:49 pm #762547Hi,
Using the color section solution the container height will be applied regardless of the content height.For the pages that push the footer to far beyond the fold, you can try and set a custom height for color section.
Best regards,
Jordan ShannonFebruary 24, 2022 at 11:36 am #1342136hi there,
we also had this problem. we fixed it globally with this css:
#main.all_colors {
display: flex;
flex-flow: column wrap;
justify-content: space-between;
min-height: 100vh;
}February 24, 2022 at 12:45 pm #1342141Hi,
Thank you for sharing your solution, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
Mike -
AuthorPosts
- The topic ‘force footer to the bottom of the screen’ is closed to new replies.