Celebrating 7 Years! Get up to $30 off GeneratePress Premium!

[Resolved] page length too long

Home Forums Support [Resolved] page length too long

Home Forums Support page length too long

  • This topic has 21 replies, 5 voices, and was last updated 3 years ago by Leo.
Viewing 15 posts - 1 through 15 (of 22 total)
  • Author
    Posts
  • #553628
    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

    #553927
    Tom
    Lead Developer
    Lead Developer

    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.

    #554084
    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

    #554308
    Tom
    Lead Developer
    Lead Developer

    Can you show me an example of what you mean?

    #554567
    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

    #554891
    Tom
    Lead Developer
    Lead Developer

    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;
        }
    }
    #555072
    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

    #555075
    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

    #555319
    Tom
    Lead Developer
    Lead Developer

    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.

    #555642
    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.

    #555674
    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

    #555790
    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

    #555829
    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

    #555903
    Tom
    Lead Developer
    Lead Developer

    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.

    #555909
    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

Viewing 15 posts - 1 through 15 (of 22 total)
  • You must be logged in to reply to this topic.