[Resolved] page length too long

[Mark]

I have a site at Fourway.michianait.net. Some pages, e.g., “Support” have a long extension on the bottom, increasing the page length, while some page, e.g., Pricing, have a page length that seems to end right after the footer, like I want.

How do I change the page so that (for example) “Support” has a page length that ends right after the footer?

Thanks
Mark

[Tom]

The footer will only go down as far as your content, so on pages with short content, the footer will display higher up.

You can extend the color of the footer quite easily, so the body background doesn’t display: https://generatepress.com/forums/topic/has-sticky-footer-been-figured-out/page/2/#post-349228

Alternatively, you just want to increase the height of your content a bit more.

[Mark]

Hi Tom,

That is not exactly what I want to do. Some themes have the ability to “shrink wrap” the page length to the content. I really don’t want to have any part of a page showing below the footer at all, like it is on the “Privacy Policy” page that you get to from the link below the footer menu.

Is there any way to make the page cutoff below the footer, for all pages?

Thanks,

Mark

[Tom]

Can you show me an example of what you mean?

[Mark]

Tom, the homepage on my site (Fourway.michianait.net) is an example of the kind of “shrink wrapping” that I would like to happen on all pages – there is no Realestate below the header.

Mark

[Tom]

That’s happening because the page is long enough to push the footer to the bottom of your screen.

There’s no non-hacky way around this. If the content isn’t long enough to push the footer down, the footer will display higher up on the page.

You could try setting a minimum height of your content:

@media (min-width: 769px) {
    .site-main {
        min-height: 700px;
    }
}

[Mark]

Hi Tom,

Thanks for getting back to me. Adding the CSS did the trick, although there is still a small sliver at the bottom of each page, as you can see on my site at fourway.michianait.net.

You asked for some examples of a page being “shrink wrapped.”

I built a sample site using the Weaver Xtreme Theme from weavertheme.com

Both the Sample page and the Test page in the menu are example pages of what I am talking about. The “Test page” is very short – only having about one line.

The site is at weaverx.michianait.net, and as you can see, even for the short page (Test page), the footer has nothing below it.

Mark

[Mark]

Tom,

Disregard the website I mentioned. I am talking about the website oceanwp.michianait.net that I just built for demo purposes. I am using the theme OceanWP – a free theme.

There are two pages – Sample page, and Test page. Test page is very short (just one line.)

As you can see, even the “Test page”, has a footer that has no screen realestate below it. This is the effect I am trying to get – the page seems to “shrink wrap” around the content + footer, leaving nothing showing below the footer, even on pages with very little content.

Thanks for looking at this.

Mark

[Tom]

They’re using javascript to force the site content to be tall enough – that’s why there’s a moment where the footer kind of flashes as it sticks to the footer.

We could do this, but I don’t really suggest it. The javascript adds weight to the page, which I don’t think is really necessary. Instead, you could just increase the value in the CSS I gave you to remove that sliver at the bottom of the page.

[wekhter]

@Mark Hi, I’m another GP user passing through.

I actually went and looked at the OceanWP demo and not only does it use javascript, but it doesn’t work all the time… I looked at the site and then maximized my window, and saw plenty of white space underneath. (I have a big screen)

This is the code I use to keep our site footer at the bottom–I have the body display using flexbox:

html, body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
#page {
  flex: 1 0 auto;
	width:100%;
}

Note that if you have the WP admin bar visible, you’ll see a scrollbar always, but anyone else viewing the site (without the admin bar) will just see the footer touching the bottom.

[Mark]

Hi wekhter,

Thanks for the reply. I am not familiar with flexbox. Is that built in to generatepress so that I can just use your CSS, or do I have to add something to the theme first?

Mark

[wekhter]

@Mark

Flexbox is a CSS layout model, so it’s not built into GeneratePress, it’s just built into CSS itself (see caniuse stats here: https://caniuse.com/#feat=flexbox)

You don’t need to add anything to the theme first, just drop that into your custom CSS

[Mark]

Thanks!

I put the code in, and it looks great on all of the desktop browser.

However, on my iPhone 6 s (in portrait mode least) there is still some blank areas under the footer.

I thought that, unless you use media queries, CSS applies to all devices and platforms. Do you have any ideawhy it is still showing area under the footer on the iPhone 6s?

Mark

[Tom]

Nice solution, wekhter!

I just checked your site on my Pixel 2 and an iPhone 8. I didn’t notice any white space on the pages.

[Mark]

Tom,

Thanks for your comment. I just looked now on my iPhone 6S and I also don’t notice any white space. Maybe it was just a transient thing that took longer to update – I don’t know, but it looks fine now.

Mark

[Author]

Posts