Set page size so it does not require scrolling

  • Resolved TxFig

    (@txfig)


    3 years, 7 months ago

    When I look at this page on a PC, the length of the page is filled so that I have to scroll in order to get to the footer. This is despite the fact that the only thing filling the bottom is the background image.

    How can I configure the settings such that IF the text (sections, using Elementor) do not force the page to use more height, that the bottom of the background image is “chopped off” so that the footer will appear at the bottom of the page without scrolling?

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter TxFig

    (@txfig)

    IOW, what I think I am asking for is that the footer be allowed to “float” a certain distance below the bottom the last section…

    Hey,
    You are setting a section in elementor to be “full-height” and that is forcing the footer below the full-screen height of the page.

    One option is to add some css to change how elementors full height works:

    @media (min-width: 768px) {
.site .elementor-section.elementor-section-height-full {
    height: calc( 100vh - 57px );
}
}

    Ben

    Thread Starter TxFig

    (@txfig)

    So where, exactly, do I put this css code?

    hannah

    (@hannahritner)

    Hi @txfig,
    You can paste it into your custom CSS box in Customize > Additional CSS.

    Best,
    Hannah

    Thread Starter TxFig

    (@txfig)

    I put that css code into the custom css area, but it didn’t seem to do anything.

    Maybe I am going about this the wrong way. The footer contains 3 rows, but I’m only using the bottom row. How do I totally DELETE rows 1 & 2?

    Hello @txfig,

    Apologies for the delay in getting back to you.

    First, disable the Keep footer on bottom of screen option in the Customizer > Footer > DESIGN tab – https://share.getcloudapp.com/KouJO5Y1.

    Then, adjust the custom CSS code to this:

    @media (min-width: 768px) {
.site .elementor-section.elementor-section-height-full {
    height: calc( 100vh - 80px );
}
}

    Maybe I am going about this the wrong way. The footer contains 3 rows, but I’m only using the bottom row. How do I totally DELETE rows 1 & 2?

    Empty footer or header rows will not show on the page.

    Hope this helps further.

    Best Regards,
    Karla

    Thread Starter TxFig

    (@txfig)

    Yes!!! thank you. That helped a lot.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Set page size so it does not require scrolling’ is closed to new replies.