Hi @ngeshlew
Thanks for reaching out.
In your child theme style.css you can do one of the following:
1. Set a min content height:
/* Main Container */
#main {
min-height: 500px;
}
OR
2. Change the body background color. The footer isn’t actually big, the body background matches the footer.
/* Body */
body {
background: #fcfcfc !important;
}
Just a quick heads up on your child theme style.css file. It looks like you’ve copied the entire Vantage style.css file in your child style.css. That’s not ideal. Besides extra load time it can lead to issues later when we release an update. Consider only storing the CSS rules you’ve edited and new CSS rules in your child style.css file.
If you want to compare the two style.css files to find where you’ve made changes you can use a program like:
https://sourcegear.com/diffmerge/
Misplon, you are a genius!! The style.css I have solved it.
But the thing is, I want the footer to be always at the bottom of the webpage. There is still a margin between it and the end of the screen.
Super 🙂 Glad to hear you’re making progress.
Vantage, unfortunately, doesn’t have a sticky footer. That, as far as I know, isn’t possible with a CSS only solution and needs JavaScript to be done.
So in summary, solution one sets a min-height for the site content, that pushes the footer further down the page, thereby making it smaller.
Solution two changes the background color to white or a color of your choosing, thereby showing the true height of the footer.
But, unfortunately, Vantage doesn’t have a sticky footer.
Thank you @misplon, the min-height sorted it out.
Super 🙂 Glad to hear that helped.
All the best.
