Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

GeneratePress GenerateBlocks

footer in mobile view is not positioned at the bottom of the page

  • lovin78
    September 25, 2024 at 11:44 pm

    Good morning,

    I have a problem on some pages, in mobile view. Footer is halfway or even in some pages it is not even visible

    As per advice I removed the fixed heights and used min-height

    this is the site url

    https://simonecontesini.it/luciana/

    I await your kind feedback
    Thanks in advance
    Simone

  • David
    September 26, 2024 at 2:46 am

    Hi there,

    I see you have this CSS on your site to force the footer down on short pages:

    
body {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100vh;
}

    The problem with that on a mobile device is 100vh includes the phones UI areas so it may result in odd behaviour such as the footer being behind the UI.

    Do you need that CSS ?

  • lovin78
    September 26, 2024 at 6:49 am

    hi,
    if I remove css, as you can see now, it’s worse, the footer is no longer visible on any page

    I await your kind feedback

    thanks

  • Ying
    September 26, 2024 at 9:16 am

    You have a container with ID anchor-news, its height is set to 500px, so its content is overflowing, remove that static height value should fix the issue.

  • lovin78
    September 26, 2024 at 10:39 pm

    Good morning,

    even removing the fixed height from the #anchor -news div doesn’t work

    I tried to insert again

    body {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100vh;
    }

    the footer is now above, but it’s not in the bottom area of ​​the page

    I need a definitive solution, I’m in an emergency. Otherwise I have to find a way to make a site without Generatepress

    I await your kind but urgent response

    thanks a lot
    Simone

  • Alvind
    September 27, 2024 at 12:07 am

    Unfortunately there isn’t a universal method that works for all setups, at least not without introducing potential issues. On mobile devices, especially, you need to account for the phone’s UI areas, which can vary significantly from device to device.

  • lovin78
    September 27, 2024 at 6:55 am

    So with generate press there isnt’ a possiblity to create a site allowed for desktop and mobile?

    I think it’s impossible you reply

    i have creata a simple container with 2 sub container columns…

  • Ying
    September 27, 2024 at 10:48 am

    So with generate press there isn’t a possiblity to create a site allowed for desktop and mobile?

    All our site library templates are customized for both desktop and mobile, one key is not adding static height/width values to blocks, and be careful with content from 3rd party plugins.

    Eg, this content from 3rd party plugin is set to 3708px which causes overflow:
    https://app.screencast.com/VSoc6KPiuZlzV

    Eg. this container is set to width:768px which also causes overflow:
    https://app.screencast.com/XQZTTC6ifEGVe

    GB block is a tool to build layout, but you need to know what you are doing. If you set a container width larger than the viewport, you need to make sure a max-width is set to avoid overflow, or set a smaller and reasonable width instead on mobile, hope that makes sense.

    From my experience, the overflow issue is always caused by incorrect style setting.

  • lovin78
    October 2, 2024 at 12:15 am

    Ok thank you very so much

  • Ying
    October 2, 2024 at 10:32 am

    You are welcome   🙂

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