Archived topic
Footer Adjustment problem Fixing
11 replies · Started by Arif on January 15, 2022
Hello, I want to fix the footer problem. How do I do that? This footer shows a different position. I want to need this footer fixed position.i want this footer show on all pages in the same position. Kindly check the attachment.
Hi there,
Any chance you can link us to the site in question?
You can use the private information field:
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information
Let me know :)
Here is my website,check it .
Hi Arif,
Try this CSS:
@media (min-width: 769px) {
.site-footer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
}
}
Adding CSS: https://docs.generatepress.com/article/adding-css/
1. I apply your code.it working, But When I scroll down on my website, I noticed that the footer menu shows fixed in one placed, it is not hidden when I scroll down it. ( ATTACHMENT 1)
what i need: suppose when I visit generatepress website front page on any post and scroll down ( Footer Menu ) does not show. It is only show on page and post ending (last) part. When page scrolling finished that time generatepress footer show.
Please, check the attachment file, you understand everything clearly.
Hi there,
Remove the CSS that Ying provided.
Then can you share a link to a Page where we can see the problem with the Footer position.
check it, now I removed Ying-provided CSS code. But when I remove the CSS code ( footer Position Change). Check my website's Home page, Accessories, and reviews page. Then you understand better. Home page Footer position is okay. But the other page Footer position changed.
The footer moves up because there is no content on those other pages.
I suggest you build those pages out with some content.
Kindly check my website ( Contact Us ), Here is the content. But it is shows a white area under the footer.
But when I set up Ying-provided CSS code. That time it is work perfect. Just it is not hidden when i scroll on-page and any post.
Try this CSS instead:
@media (min-width: 769px) {
div#page {
min-height: calc( 100vh - 225px);
}
}
225px is the total height of the header and footer, if your footer/header height changes, it's better to updated the value.
You are Awsome and Expert. Many Many thanks. Problem finally solved by you. Again, Thanks.
You are welcome :)