[Support request] keeping pages the same height

Home Forums Support keeping pages the same height

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1399781
    Robin

    hello again

    I would like to keep the height of all the web-site pages the same, possibly also keeping an image at the bottom of the page. If you visit the link below you will see what I mean.

    There will be text in place of the spacers and title-image shown on each page. Not a lot of text, so I think that same page height will work (and if not, overflow auto can step in.

    What I want to know is how to make an area of text (paragraphs and a small header) exactly the same height as the content above the bottom image of the peaks.

    And would it be a good idea for me to use a hook for that bottom image?

    #1400297
    David
    Staff
    Customer Support

    Hi there,

    put it down to lack if coffee – but i am not clear on what you require.
    Any possibility of a mockup screenshot ?

    #1401272
    Robin

    here are two screenshots

    I want the website to function basically like a deck of flashcards, always the same height. Not sure if I will keep that bottom image, but I’m thinking of keeping it as low opacity– but that would require layers, and I don’t know how to do that without that peaks image being the background image– which brings up the image-going-underneath-the-menu problem we’ve talked about before (that I tried and failed to solve with a header-element.

    #1401273
    Robin

    I will look at the header element docs again and see if I can figure that out. the same thing would pertain: I want to see the pages all at the same fixed height.

    #1401656
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    So you want the page to be 100% height and no taller? Or do you want it to be at least 100% in height with the ability to scroll down?

    #1401703
    Robin

    100% of the browser height and no taller. I can use overflow css for text areas.

    #1402398
    David
    Staff
    Customer Support

    Tricky to do.
    You would need to add a Container Block and set is Spacing > Min Height to 100vh.
    Then give it an Advanced > Additional CSS class of max-viewport

    Then add this CSS:

    .max-viewport {
        max-height: 100vh;
        overflow-y: scroll;
    }

    Thats the first step in ensuring your parent container block is always filling the screen.
    With the Merged header enabled, this Conatiner Block will need enough Top Padding so it does not fall behind the Header.

    Thats the logic of it – will no doubt need some tweaking and similar treatment of for overflow scroll will have to be applied to any nested containers or grid columns.

    #1402907
    Robin

    I will try that. There is no merged header, as I haven’t yet solved that– couldn’t make the Header element work even though I followed your instructions, so there is no Header Element active.

    Thank you.

    #1403048
    David
    Staff
    Customer Support

    Let us know how you get on.

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