[Resolved] Sticky Footer with Flexbox?

Home Forums Support [Resolved] Sticky Footer with Flexbox?

Home Forums Support Sticky Footer with Flexbox?

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

    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: https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
    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: http://www.lik.com/
    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!

    #369044
    Leo
    Staff
    Customer Support
    #369303
    Caleb

    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!

    #369373
    Leo
    Staff
    Customer Support

    What’s not working in the solution I linked?

    It should give you the desired effect?

    #369391
    David
    Staff
    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.

    #369487
    Caleb

    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!

    #369515
    Leo
    Staff
    Customer Support

    You should only have to add the CSS here to make it work: https://generatepress.com/forums/topic/has-sticky-footer-been-figured-out/#post-346811

    #369520
    Caleb

    @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.

    #369529
    Leo
    Staff
    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 πŸ™‚

    #369818
    Caleb

    @ 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 πŸ™‚

    #369856
    Leo
    Staff
    Customer Support

    No problem! We really appreciate it πŸ™‚

    #384315
    Denise

    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,
    Denise

    #384360
    Leo
    Staff
    Customer Support

    Can you provide a link? I can check for sure πŸ™‚

    #384713
    Leo
    Staff
    Customer Support

    Hmm not seeing the footer being sticky…

    #389078
    Denise

    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.

    Denise

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