Sticky Footer

Home Forums Legacy Support Support queries Styling issues Sticky Footer

Tagged: 

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #8266
    externaluses
    Participant
    What's the preferred method to making the footer "stick" when there is not much content on the page? If there is not enough content, the footer is not drawn properly, sometimes it's in the middle of the page instead of relative to the browser's end.  
    #8567
    Anshuman Sahu
    Keymaster
    Please try adding the given css from wp-admin -> appearance -> customize -> custom css: section#content .content {     min-height: 100vh; }  
    #9031
    peterhupuczi
    Spectator
    Hi, this is not working for me... I'm using the OneCourse Child theme please see the attached screenshot...
    #9128
    Anshuman Sahu
    Keymaster
    Try this css  : section#content { min-height: 100vh; }
    #9138
    peterhupuczi
    Spectator
    I does something but it will break the parallax header onhome page with OneCourse childtheme....
    #9262
    Anshuman Sahu
    Keymaster
    CAn you share the url of your site . YOu can also share the url of your site in a private reply if you want it to be private .
    #9276
    peterhupuczi
    Spectator
    Sorry, Im on local server...
    #9490
    Anshuman Sahu
    Keymaster
    Remove all other css and try adding this css  : section.main { min-height: 100vh; } We need a url of the page where the issue is appearing to provide you the exact css >
    #14636
    externaluses
    Participant
    He is correct, it will break the homepage because the layout looks like this: <section id="content"></section> <section class="stripe"></section> <section class="main nextstripe"></section> <section class="stripe homesixsections"></section> <section class="main nextstripe"></section> <section class="stripe homemain"></section> There is no content in the "content" section, and will just create a large whitespace. On other pages, it will work because the content is within that section. Example, a course page would have the following layout:
    <header class="fix fixed"></header> <section id="content"></section> <footer></footer> <div id="footerbottom"></div>
    As you can see, there is no "main" in any of the divs or sections.
    #14703
    Anshuman Sahu
    Keymaster
    Please note that different child themes and page templates have diffrent domes so to provide the specific css we need either site url or the page template name for that page and the child theme name .
    #14728
    externaluses
    Participant
    I am using the Child One theme, and the page template shown above is "Start Course Page."
    #14968
    Anshuman Sahu
    Keymaster
    Please try adding the given code in your wp-admin -> appearance -> customize -. custom css : header+section{min-height:100vh;}
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Sticky Footer’ is closed to new replies.