I´m using Vantage Premium theme in my website.
How can I make footer small?
As you can see in my website, I do not put almost any info there.
www.proyectomaya.com
Thanks.
Footer Size
This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.
HI Maria
Please refer to your email ticket in this regard.
Thanks
I have the same question………. How do you reduce the block height of the footer?
Hi elefantrider
You can try the following under Appearance > Custom CSS or your own CSS module:
#colophon { padding-bottom: 30px !important; padding-top: 30px !important; }Adjust 30px as required.
do I copy/paste the everything starting from the # to the } ?
Everything in the black code block.
Hi Andrew.
I’m having the same problem as described here. I adjusted the CSS settings the way you said, but it worked for all my pages, except my Home Page, made with Page Builder. Is there anything else i could set to solve this issue with my home page only? If you want, i can show you my site.
Tks for now.
My mistake. It’s not only in the Home Page. My site increases the footer size in almost of my pages. It can’t keep the 30px as I configured.
The thing is: if i use use my web browser in full screen, the footer gets bigger. If i reduce the browser windows, then it work perfectly the 30px.
Any suggestions?
Hi Gustavo
The padding discussed here refers to the padding that content added to the footer receives. Vantage doesn’t have a permanently positioned footer, this means that the footer takes up screen space that the content container doesn’t.
My fix for this, in a limited sense, is to add a minimum height to the content container. Add the following to Appearance > Custom CSS:
/* Main Container */ #main { min-height: 500px; }You can adjust 500px to whatever you’d like the minimum height of your content container to be.
Hi Andrew,
Thanks for the reply. But it didn’t work as i was expecting.
But tks for your help anyway. I’m still trying to understand what’s going on. I’m new at WordPress and i’ll not take your time anymore. Let me study!!!
:-)
[]’s
In summary, the footer will fill whatever screen space the content area does not. There isn’t fix for this within theme options. All you can do is push the content area down, thereby reducing the footer area, this is what the above is CSS is for.
Andrew,
Tks again for your time! Will try all this things later.
[]’s
For sure. Chat then.
Hi Andrew,
I am facing the same issue as others, a huge footer. Here is our link: http://www.dikayu.com. I tried adding the custom css as above, without result though. Do you have other suggestions to make the footer smaller? In some pages it becomes almost half the screen..
Thanks!
Vitri
/* Footer */
#colophon {
padding-bottom: 20px !important;
padding-top: 20px !important;
}
/* Main Container */
#main {
min-height: 200px;
}
Hi dikayu
The only way to resolve this is to use the last selector you have there:
/* Main Container */ #main { min-height: 500px; }Set it to 500 or 600px. What you’re doing there is making the main container bigger to push the footer down.
Hope that helps.
Further any follow-ups please open a new support thread and we’ll be with you ASAP:
Page: New Thread
Thanks Andrew,
it helped a bit!
Regards,
Vitri
For sure. It’s unfortunately my best solution given the theme’s design.
All the best.
Hi. Try this css:
.layout-full #colophon {
margin-bottom: 0;
margin-top: 0;
padding-top: 0px;
padding-bottom: 30px;
}
Hi Andrew Misplon,
Some of my pages didn’t reduce the width of footer but lots of pages did.
This is the thing which will make my web Non-Professional.
Do you know any thing about that.
Links of Problem:
All Pages underneath News & Events:
http://www.kmlsolution.com/new/news-events/quote-of-the-week/
http://www.kmlsolution.com/new/news-events/newsupcoming-event/
All Website pages reduced the footer size Except above mentioned.
Your reply is solicited.
Thank you and regards
Problem resolved.
I try this code as you mentioned above:
/* Main Container */
#main {
min-height: 650px;
}
just change height from 500 to 650px.
You can also adjust the main container based on a percentage of the current window size.
Below code will make the main container a minimum of 77% of the current window size.
/* Main Container Height Adjust */
#main {
min-height: 77vh;
}