[Resolved] How to customize the page for no results found after search?

[Robert]

Can you please tell me how can I customize the page for no results found in the search? So if someone types something in the search field and there are no results on the website then a page is shown with “Nothing found” but that page brings my footer way up to the top and it looks bad.

[Ying]

Hi Robert,

So you want the footer stay at the bottom on no result page?

If so, you can add this CSS to your site:

@media (min-width: 769px) {
    .search-no-results .site-footer {
        position: fixed;
        width: 100%;
        bottom: 0;
    }
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

[Robert]

Hi,

I want it to stay at the bottom on every page that has not enough content to push it down, not just in the search page.

Kind regards,
Robert

[Fernando]

Hi Robert,

On the contrary, if you would just like to make sure that the footer is at the bottom as opposed to making it sticky at the bottom, you can try this CSS instead:

div#page {
    min-height: calc(100vh - 265px);
}

This CSS would make sure that the body takes up 100% view height minus the height of the footer and the header(which is 265px). You may also subtract the height of your ads as well if you prefer.

Hope this helps! Kindly let us know how it goes. 🙂

[Robert]

Hello Fernando,

This is something closer to what I want but has to be done manually because I could have different sizes of footers on different pages.

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=eyJwcmV2aWV3IjoxfQ

This is the example of the no results found search page where Ying solved my problem with the CSS code:
https://retetediabetici.ro/?s=generatepress

I hope you can understand my need now.

Kind regards,
Robert

[David]

Hi there,

the only dynamic way without using Javascript is this:

@media(min-width: 769px) {
    body {
        display: flex;
        flex-direction: column;
        width: 100%;
        min-height: 100vh;
    }
    .site {
        flex: 1;
    }
}

Problem you may have is your site is auto inserting adverts including one that is added to the footer that affects the body bottom padding so it may not work as you want it to because there are too many moving parts.

[Robert]

Duplicate. We continue on the other post.

[Author]

Posts