[Support request] fixed page height?

Home Forums Support [Support request] fixed page height?

Home Forums Support fixed page height?

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #891219
    Mark

    My pages are too long – I would like them to fit on one screen without having to scroll.

    If memory serves, when page layout with CSS was just starting, there were designs that had a fixed height per page. (Maybe I am just thinking of a fixed width, I’m not sure). I know that (at least with generate press) the footer gets pushed down to the bottom of the page, but I don’t know what controls (or even if it can be controlled) the height of the content area above the footer.

    For example, on my home page, I would like to reduce the amount of Realestate below the two images and before the footer. Is this even possible to do? I remember that the height of a page depends on the content – maybe I could set the bottom padding or margin to a small number? But how would I do this?

    Thanks for your thoughts.

    Mark

    #891254
    Leo
    Staff
    Customer Support

    Hi there,

    I don’t think there is a good to set the maximum height of a page, otherwise the content would be cut off.

    You can try using the layout metabox if it’s just for one page:
    https://docs.generatepress.com/article/footer-widgets/#change-the-number-of-footer-widgets-on-individual-pages-posts

    or Layout Elements if you’d don’t want to set it per page basis:
    https://docs.generatepress.com/article/layout-element-overview/#footer

    Let me know if this helps ๐Ÿ™‚

    #891470
    Mark

    Leo,

    I understand what you are saying. At the same time, there must be something in the code that, for example, is setting how high the content area in that home page is supposed to be, e.g., some margin or padding in the content area where the two pictures are inserted. How does the page “know” how much space to leave below the pictures?

    Personally, I prefer a long front page with scrolling, but I am designing this is some really tech newbies that don’t even know they are supposed to scroll!

    Mark

    #891498
    David
    Staff
    Customer Support

    Hi there,

    so this CSS you have on your site to force the footer to the bottom of the viewport:

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

    The way this works is that the body becomes a flex column. Elements within this can be manipulated for size and position. Your #page ( the content ) has a flex: 1 0 auto; property, this is shorthand for flex-grow: 1 ( True – i can and will grow ), flex-shrink: 0 (False – i will not shrink ) and flex-basis: auto ( the preferred height, in the case of a flex column, that i want to be).

    So the additional space below the content is responsive. Although you could change the flex property to set a preferred size it would mean the footer would also move up…. so there isn’t really a solution to this without allowing the footer to float up.

    #891524
    Mark

    Hi David,

    Thanks for your response. I am a little confused about what you are saying. Is the CSS you provided already on the page, or were you suggesting I ADD this to the page? So there is no way to keep the footer at the bottom of the page if I control the content height of the page?

    Mark

    #891539
    David
    Staff
    Customer Support

    That CSS is already on the Site you provided the link to ๐Ÿ™‚ And is what currently keeps the Footer at the bottom of the browser viewport.

    Can you clarify what you mean by controlling the content height? Do you want the content to scale to fit what space is available? ( which will be tricky ).

    #891540
    Mark

    David,

    I am helping a friend by designing a site for her. Her customers are not tech savvy at all, so she thinks they won’t scroll down to see what is in the footer. As a consequence, she would like the (at least the front page) page to all fit on one screen, without having to scroll. So I was thinking that it would if the main content area was shorter.

    Mark

    #891557
    David
    Staff
    Customer Support

    Right ok – so looking at the page on the most common size screen of 1366 x 768px, yes the footer isn’t visible. The fix to this would be to reduce the size of the content on the page. So make the images smaller, reduce the header size etc….

    #891571
    Mark

    Thanks David,

    I have made the images smaller – it just seems there is a lot of empty space below the images that is forcing the page height to be longer than it needs to be.

    Mark

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