Premium support

Please log in to post in these forums. If you didn't create an account when you purchased, please contact us.

Free support

If you haven't purchased GP Premium, support for the free theme can be found on

[Resolved] Sticky Footer with Flexbox?

Home Forums Support Sticky Footer with Flexbox?


This topic contains 15 replies, has 4 voices, and was last updated by  Leo 8 months ago.

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
  • #369041

    Hey Tom,
    I am not sure if you can help with this. I have seen several forum posts about sticky footer but nothing that I can see is resolved for what I am looking for. I also have absolutely no experience with coding so I am very lost. Is there a way I can add the code from here:
    And get it to operate like that? I need so badly for the footer to stick to the bottom only when the content isn’t long enough, just like that site is showing. I want my site to work like this:
    when you toggle from normal to full screen the page always fits the browser which is what I’m looking for.
    My home page is very similar. I would gladly provide you with login information to look at my site if that helps. Also, I understand if you cannot help. Either way, I appreciate very much what you have done with GP Pro and could not have gotten as far as I have now without it. I am forever in your debt! So thank you very much for all your hard work!

    GP Premium 1.4.3

    Customer Support

    Thanks for getting back Leo!
    Unfortunately, I have already read through that post. I might be able to do this on my own, but I am not knowledgeable on where I need to go in WordPress/theme to write the code I linked to.
    Would you happen to know where I can go for that? Thank you in advance!


    Customer Support

    What’s not working in the solution I linked?

    It should give you the desired effect?


    Customer Support

    Caleb – firstly install Simple CSS from the wordpress plugin directory and activate.
    Then go to WordPress dashboard > Appearance > Simple CSS.
    In the editor window Copy and Paste the code that Leo provided in the other link, And Save CSS.
    When you then preview your pages you will see the footer is sticky.

    You don’t need to use flexbox to do this. That code is more from a developers point of view when creating a site.


    Leo – More than likely my lack of understanding. Thank you for the help

    Dave – Thank you for the explanation I will give that a try!


    Customer Support

    @leo Thank you! I will give it a go once I get off work. I appreciate all the help, its the main thing keeping me from going live.


    Customer Support

    Sounds good. It would be easier for us to help if we can see the site live and tell what’s working/not working 🙂


    @ Leo
    Hey! I got a chance to give it a go. It’s a win lose really and I think I will have to just work around it until we can pay a programmer. The footer sticks to the bottom. which is great for the pages that don’t have enough content. But I don’t want it there when I do have enough content. Like I said, I will have to find a way to work around it for now because I don’t see anyone posting anything that is what I’m looking for (The flexbox example site I linked was exactly the kind of behavior I’m looking to get someday.)
    Thank you again from everyone who gave me suggestions! I really appreciate it, seeing as I am so new to website building and have no coding knowledge! You guys rock! Will definitely be donating when I get some spare change 🙂


    Customer Support

    No problem! We really appreciate it 🙂


    In case this might be helpful for someone….

    I am having a similar issue with pages that have short content. For example, if someone searches on a word and there are no results returned, the height of the entire page is very short and the footer goes up too high. The result I’m going for is not really a “sticky” footer that always displays in a fixed position. Instead, it’s more a matter of adding extra padding to the main content so that it bumps the footer back down to a lower position on the page.

    To solve it, I added this CSS:
    .site-content {
    min-height: 100vh;

    I don’t know if it’s the best solution or not, but it seems to at least help. I’ve only tested it on Chrome on Windows 10 laptop. I’d be interested to know how it displays on other devices.

    Best wishes,


    Customer Support

    Can you provide a link? I can check for sure 🙂


    Customer Support

    Hmm not seeing the footer being sticky…


    Hi Leo,

    Correct. The footer is not sticky. You have to scroll down to see the footer. This solution is not a good one. It’s a compromise and a trade-off. It stops the footer from being too high when there is only a small amount of content on the page.

    I don’t have any further questions. Thanks for your help.


Viewing 15 posts - 1 through 15 (of 16 total)

You must be logged in to reply to this topic.