Footer not on bottom (only larger screens)

  • Resolved bin10313

    (@bin10313)


    3 years, 11 months ago

    Hi,
    Thanks for this awesome plugin.
    The header works fine using this plugin: all website, all devices.
    The footer works fine on:
    1) Frontpage (All devices)
    2) Rest of the website (Only Mobile devices and Tablets, not laptop)

    For rest of the website, and on larger screens (laptop), the footer is floating just below the header towards the right. When I removed the custom footer, even the original footer was now all over the page below the header.

    I have temporarily created two footers now. One for front page. Other for the rest of the site with responsive setting: hidden on large screens (so that larger screens show blank instead of floating below header).

    The page posted above is kept in exceptions in both so that I can show it to you.

    Kindly help, I am quite stressed out!

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

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Support Team Brainstorm Force

    (@brainstormteam)

    3 years, 11 months ago

    Hello @bin10313

    Thanks for providing us with the link.

    However, it is hard to determine the issue without looking into the website and other settings. Could you please try purging the cache, deactivate Autoptimize plugin, and check if the issue is resolved at your end.

    Also, this could be an issue related to the theme. Could you please try switching temporarily to another theme like TwentyTwenty and check if the footer moves to the bottom.

    In case, the issue still persists we would need to have a closer look at the website. Please let us know how it goes.

    Regards,
    Suman

    Optimizing Matters

    (@optimizingmatters)

    3 years, 11 months ago

    pro-tip; you can disable Autoptimize on a per-request basis by adding ?ao_noptimize=1 to the URL.

    if the problem is not there at that point, some autoptimize (re-)configuration might be needed to fix this. there are troubleshooting tips and info on how to exclude in the AO FAQ.

    hope this helps debugging,
    frank (ao dev)

    Thread Starter bin10313

    (@bin10313)

    3 years, 11 months ago

    I keep deleting cache on a regular basis, especially after making changes. I have deactivated Autoptimize, and flushed the cache just now. But it is the same. The footer is still just below the header. I can’t try switching the theme, as this is too risky, and I am not prepared to do that long process of switching later in case it works like that.

    Let me know please if you need a closer look or access to the site. I can send a mail privately. Thanks a lot!

    Bineet

    Thread Starter bin10313

    (@bin10313)

    3 years, 11 months ago

    By the way, I was wondering how it worked on Front-page without any hassles. So I changed the template layout of this ‘Interview’ page to Elementor Canvas just like the front page. So now the footer is on the bottom. Phew! In fact, it works on all templates except the default template, which is the case with all the pages and posts on the website.

    This brings me to the next question, why this? It would be awfully tedious to change the layout of all the pages now to Canvas just to make it work?!

    I have checked the default template for the footer page. It is the default template as well. Changing its template type doesn’t solve the problem as well.

    Also, if I change the settings of your plugin to Method 2. The footer issue is resolved. However, there is a large blank space above header now. I inspected the white space. It shows the following for half of that blank space region: <div class=”header-clone” style=”height: 118px;”></div>
    After removing it in the inspect element, other half of the blank space still remains. If this is fixed, it could solve all problems it appears.

    • This reply was modified 3 years, 11 months ago by bin10313.
    • This reply was modified 3 years, 11 months ago by bin10313.
    Thread Starter bin10313

    (@bin10313)

    3 years, 11 months ago

    Ok, for the rest of the blank space it is the top padding for div id = content of page-wrap class: <div id=”content” class=”page-wrap”>
    The screenshot for this is:
    After making it 0, there is still some blank space on top, which is the padding for div class ‘container content-wrapper’.
    After making it 0. The perfect header comes along with the perfect footer.

    Now kindly tell me from where should I fix all these 3 things: removing the header-clone, padding for class page wrap, and padding for class content-wrapper.

    Eagerly waiting for your reply.

    Bineet

    Thread Starter bin10313

    (@bin10313)

    3 years, 11 months ago

    Here are the screenshots:
    https://ibb.co/dBQBVZD
    https://ibb.co/HDC43w8

    Thread Starter bin10313

    (@bin10313)

    3 years, 11 months ago

    Ok the white space due to header-clone got removed by adding the following css in customization->custom css:

    .header-clone {
    display: none;
    }

    Now just the padding issue is left as given in the above screenshots.

    Thread Starter bin10313

    (@bin10313)

    3 years, 11 months ago

    Alright guys, removed the rest of the blank space with the following css:

    .page .page-wrap .content-wrapper{
    padding: 0px !important;
    }

    .page-wrap {
    padding-top: 0px !important;
    }

    Everything is fixed now.
    I am using the second option in the setting, the header, and the footer look great!
    Even my left-right margins are back now.

    Thanks again for this awesome plugin!

    Plugin Support Team Brainstorm Force

    (@brainstormteam)

    3 years, 11 months ago

    Perfect, @bin10313!

    Glad that you could figure it out.

    Do let us know if there’s anything else we can help you with.

    P.S. We are always available through our Support Portal for quicker help and resolution.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Footer not on bottom (only larger screens)’ is closed to new replies.