WordPress.org

Ready to get started?Download WordPress

Forums

Simple Catch
How to make the footer stick at the bottom of the page? (18 posts)

  1. squashai
    Member
    Posted 2 years ago #

    Hi,

    I'm using Simple Catch, and really liking it.

    However, I'm trying to use a few pages that are short on content, resulting on a footer that appears in the middle of the page. It's quite an eyesore.

    Is there any way to make the footer hug the bottom of the screen, unless the page is longer than the screen?

    Thanks.

    http://wordpress.org/extend/themes/simple-catch/

  2. Sanjiv
    Member
    Posted 2 years ago #

    Hi! squashai

    First of all thank you for your appreciation.

    If you have some pages that are short on content and want the footer to appear at the bottom then you could write some custom css lines.

    To write custom css lines.
    Go to the Appearance menu.
    Go to the theme options sub menu under it.
    Click on the custom css styles tab.
    Then you could enter this following css code on the enter your custom css styles field.

    #main {
    min-height: 600px;
    }

    You could adjust the 400px i.e is the height for the content according to your will. It will push the footer down.
    And save the changes.

    Hope this will work.

    Regards,
    Sanjiv(Catch Themes)

  3. squashai
    Member
    Posted 2 years ago #

    Hi Sanjiv!

    Thanks for your quick and helpful reply!

    I did try that, and it does push the footer down. However, if the browser window is resized, the footer sometimes appears below the bottom of the window, while at other times it still floats in the middle leaving an unsightly white gap at the bottom.

    I have also tried various similar hacks, including these:

    http://stackoverflow.com/questions/25238/100-min-height-css-layout

    http://peterned.home.xs4all.nl/examples/csslayout1.html

    Adding height:100%; to both the html and body tags, and either height:100%; or height:60%; to #main. This is much closer to the functionality I want, but I cannot seem to achieve a layout in which the bottom of the footer is flush with the bottom of the browser--there is either a scrollbar for no reason, or the unsightly white bar.

    This leads me to believe that there are other elements whose height attributes are competing with that of #main.

    I am not very proficient at CSS, however, so I cannot tell which ones I should modify.

    Again, all I want is for the bottom of the footer to stick to the bottom of the browser window, unless the content is longer than the height of the window.

    Is there a simple way to do this?

  4. Catch Themes
    Member
    Theme Author

    Posted 2 years ago #

    Hi Squashai,

    Can you send me the link. I will check it and let you know the perfect answer.

    Regards,
    Sakin

  5. squashai
    Member
    Posted 2 years ago #

    Sure, it's here.

  6. squashai
    Member
    Posted 2 years ago #

    Hmmm...do you think this would work?

    Particularly the line that gives the container a negative margin?

    #wrapper {
            min-height: 100%;
            height:     auto !important;
            height:     100%;
            margin:     0 auto -44px; /* -44px being the size of the footer */
        }

    Well, I tried it, and it creates precisely the wrong effect. Oh well.

  7. Catch Themes
    Member
    Theme Author

    Posted 2 years ago #

    I just visited your site and saw that you have add this in your inline css
    #main {
    height: auto !important;
    margin: 0 auto -500px;
    min-height: 100%;
    }
    You should remove the margin section. That is creating the problem.

  8. squashai
    Member
    Posted 2 years ago #

    Sorry, I was messing around with it, trying to see if I could come up with a configuration that would work.

    I've removed the margin section, but the page is still oversized.

    Can you look at it again?

    To reiterate, what I'm trying to achieve is having the bottom of the footer flush with the bottom of the browser window, unless there's overflow of the content.

  9. Catch Themes
    Member
    Theme Author

    Posted 2 years ago #

    This is not particular to theme issues. As this is the design issue which our theme doesn't support. Ihttp://wordpress.org/support/topic/theme-simple-catch-how-to-make-the-footer-stick-at-the-bottom-of-the-page?replies=8f you give them minimum height then depending on the screen resolution, in some screen it will look fine and in other it will still be in the middle.

    But looking at your design and css you have added. Just replace the inline css you have added as
    #main {
    height: auto !important;
    min-height: 100%;
    }
    to
    #main {
    height: auto !important;
    min-height: 43%;
    }

  10. squashai
    Member
    Posted 2 years ago #

    I see. Thank you for help. I appreciate you taking the time to look at this and trying to figure it out.

    One last question: is there a way I could make the footer a fixed height and position it absolutely at the bottom?

  11. Catch Themes
    Member
    Theme Author

    Posted 2 years ago #

    but again that will create problem if you keep the position fixed when there is long text. To create the position absolute we need supporting relative div.

  12. squashai
    Member
    Posted 2 years ago #

    Actually, it seems to work just great.

    I simply fixed it at the bottom and gave it a really high z-index.

    #main {
    height: auto !important;
    min-height: 50%;
    padding-bottom: 50px; /* The Submit button was disappearing on my blog pages. */
    }
    
    #footer {
    position: fixed;
    bottom: 0px;
    margin: 0px;
    padding: 10px;
    height: 20px;
    width: 100%; /* It stopped filling the page without this. */
    z-index: 9000;
    }
    
    #footer .copyright img {
    	max-width:30px;
    	height: 20px; /* I wanted to shrink it a little--it was pretty huge. */
    	overflow:hidden;
    	float:left;
    	margin:0 10px 0 0; /* Also brought it a little closer to the text. */
    }

    It works in Chrome and IE, and even on my Samsung Galaxy Nexus (with Chrome for Android).

    I think I got the details from here.

    Anyway, thanks again for the great theme and the dedicated support!

  13. Catch Themes
    Member
    Theme Author

    Posted 2 years ago #

    but don't you think there is problem in your blog section. You can see in your blog section you footer is fixed position always at the bottom. So, it looks quite odd. But it's your call.

    Thanks.

  14. squashai
    Member
    Posted 2 years ago #

    Hmm...I guess you're right. I think it looks fine as it is, but perhaps it would look ridiculous if I put widgets it.

    Thanks again. I guess I'll think about it.

  15. sulabh
    Member
    Posted 1 year ago #

    Hi,
    I am using theme Simple Catch for my website its easy to use and nicely designed but i am facing some problems.
    Like when i am installing any contact form or i change search bar to some other design it turns text areas into grey when we click to add text..i want them to be white..can anything be done?
    Thank you

  16. vosmmr
    Member
    Posted 1 year ago #

    Can someone tell me how to edit the footer text?

    Thank You

  17. Catch Themes
    Member
    Theme Author

    Posted 1 year ago #

    @vosmmr: If you are good at customizing then you can remove the filter and caret new one in your child theme. This is the filter which adds the footer text:

    add_filter( 'simplecatch_credits', 'simplecatch_footer' );

    But if you just want a footer editor to simply edit the footer text without touching code then you have option to upgrade to Simple Catch Pro Theme.

  18. Celeste1212
    Member
    Posted 1 year ago #

    I just want to say thanks to squashai for the footer code. That footer in the center of the page looked terrible, but now it's where it belongs ... at the foot of the page :)

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic