- This topic has 13 replies, 4 voices, and was last updated 3 years, 4 months ago by
.
-
Posts
-
Is there a way to stick the custom footer section to the bottom of the page? For example, here is a link that will show my footer wrong when searching for something that’s not found on the website: https://retetediabetici.ro/?s=generatepress
Customer Support
Hi Robert,
Try this CSS:
@media (min-width: 769px) { .search-no-results .site-footer { position: fixed; width: 100%; bottom: 0; } }Hello Ying,
It’s not working everywhere.
For example it’s not working here: https://retetediabetici.ro/?mailpoet_page=subscriptions&mailpoet_router&endpoint=subscription&action=manage&data=eyJwcmV2aWV3IjoxfQ
Maybe because that’s not the site footer and it’s just an element I created and use it as a site footer?Kind regards,
RobertCustomer Support
Hi Robert,
The code provided by Ying only makes the footer sticky on the no search results page.
To clarify, are you wanting to make your custom footer “stick” at the bottom of the page for your entire site?
If so, try this CSS:
.site-footer { position: fixed; width: 100%; bottom: 0; }If you want it to stick for tablet and desktop only, try this instead:
@media (min-width: 769px) { .site-footer { position: fixed; width: 100%; bottom: 0; } }Side note: The space at the Bottom is generated from a Paragraph Block in your custom footer. If you would like to remove this space, kindly remove that empty Paragraph Block.
Hope this helps! Kindly let us know if further assistance is needed. 🙂
Thank you both for your help. I think I did not explain myself so you can understand me.
I do not want the footer to be on top of the content
If I use this:
.site-footer {
position: fixed;
width: 100%;
bottom: 0;
}or this:
@media (min-width: 769px) {
.site-footer {
position: fixed;
width: 100%;
bottom: 0;
}
}the footer will always be on top of the content and seen all the time.
I want the footer to stick to the bottom on the pages that have shorter content (like on the no results found search page).
This is an example of a page where the header should be on the bottom and it isn’t:
https://retetediabetici.ro/?mailpoet_page=subscriptions&mailpoet_router&endpoint=subscription&action=manage&data=eyJwcmV2aWV3IjoxfQThis is the example of the no results found search page where Ying solved my problem with the CSS code:
https://retetediabetici.ro/?s=generatepressI hope you can understand my need now.
Kind regards,
RobertCustomer Support
Hi there,
try this CSS:
@media(min-width: 769px) { .site { min-height: calc(100vh - 305px); } }this will set the Min height of the main site container to 100vh ( thats the height of the browser viewport ) minus 305px which is the combined height of the Site Header ( 100px ) and the Footer ( 205px ).
NOTE –> I see you have a separate topic that has some relation to this…. See my reply there:
https://generatepress.com/forums/topic/how-to-customize-the-page-for-no-results-found-after-search/#post-2199253Hello David,
This moved the footer to the bottom, there is a little bit of scroll but I can live with it if there is no other way to have it there. There is a problem with the mobile. The footer’s not at the bottom.
I have tried both codes, this one and the one in the other post. Same thing. I also test in a browser with ad-blocking so ads are not affecting what I see. I will close the other topic.
I have this on the website now:
@media(min-width: 769px) {
body {
display: flex;
flex-direction: column;
width: 100%;
min-height: 100vh;
}
.site {
flex: 1;
}
}Kind regards,
RobertRemove the @media query if you want it applied to all device sizes, so the CSS will look like this:
body { display: flex; flex-direction: column; width: 100%; min-height: 100vh; } .site { flex: 1; }That stops my website body from being full width. I guess I cannot make you understand what I want so seems like there is no point in continuing this topic.
I understand what you want – but unfortunately there is no easy way to do it. The code i provided above works in probably 9 out of 10 cases. But when you have dynamically inserted content such as adverts and the styles added by them i doubt you will ever find a 100% working solution.
Sorry we couldn’t be of much help
But it’s already done for the no results search page (desktop and tablet). I don’t understand why is not possible to do it for the other pages and also for the mobile. As I said…ignore the ads…
If the issue is only the site container container collapsing then try this:
body { display: flex; flex-direction: column; width: 100%; min-height: 100vh; } .site { flex: 1; } .no-sidebar .site { width: 100% !important; }That solved everything! I’m going to test it for a bit but it looks like it’s the winner code 🙂
Thanks again for not giving up on me 🙂
Yeah – test it thoroughly it is a bit of a hack 🙂
Glad to be of help
- You must be logged in to reply to this topic.
