Support » Fixing WordPress » Sticky Footer

  • Resolved Brooke082010

    (@brooke082010)


    Hi,

    I am trying to make my footer sit at the bottom of the page no matter how much content i have. My website is http://www.fancypantscustomcakes.com.au

    Here is my basic structure

    /* Basic Structure
    -------------------------------------------------------------- */
    #wrapper {
    	max-width: 1920px;
    	width: 100%;
    	margin: 0 auto;
    }
    #header-wrap {
    	background: #fff;
    }
    #header {
    	position: relative;
    	min-height: 0em;
    }
    #wrap {
    	clear: both;
    	margin: 2em auto 0;
    }
    #content {
    	float: left;
    	width: 65%;
    	-webkit-box-sizing: border-box;
    	-moz-box-sizing: border-box;
    	box-sizing: border-box;
    }
    #sidebar {
    	margin-left: 65%;
    	width: 35%;
    	padding-left: 2em;
    	-webkit-box-sizing: border-box;
    	-moz-box-sizing: border-box;
    	box-sizing: border-box;
    }
    .container {
    	max-width: 1920px;
    	width: 100%;
    	margin: 0 auto;
    	-webkit-box-sizing: border-box;
    	-moz-box-sizing: border-box;
    	box-sizing: border-box;
    }
    
    /* Header
    -------------------------------------------------------------- */
    
    header .site-description {
    	font-size: 1.0em;
    	margin-top: 0.0em;
    	color: #333;
    }
    #header-line {
    	float: right;
    	font-size: 1.0em;
    	padding: none;
    	color: #333;
    }
    
    /* Header Image */
    #header-image-wrap {
    	background: #00bc45;
    	text-align: center;
    	min-height: 10em;
    }
    .header-image img {
    	vertical-align: top;
    	max-width: 100%;
    	height: auto;
    	-webkit-box-sizing: border-box;
    	-moz-box-sizing: border-box;
    	box-sizing: border-box;
    	border-top: 1px solid #ccc;
    	border-bottom: 1px solid #ddd;
    }

    and my footer

    /* Footer
    -------------------------------------------------------------- */
    #footer-wrap {
    	background: #00abea;
    	border: 1px solid #2807cf;
    	box-shadow: 0 0px 0px #111;
    }
    #footer {
    	padding: 1em 0;
    	color: #fff;
    }
    #footer a {
    	color: #ddd;
    }
    #footer #credit-link {
    	float: right;
    	font-size: 0.9em;
    }

    If anybody could help that would be greatly appreciated!

Viewing 6 replies - 1 through 6 (of 6 total)
  • You should create a Child theme to make your changes. If you do not, all of your changes will be lost if you update your theme.
    Try adding this to the end of your child theme’s style.css:

    #footer-wrap {
    position: fixed;
    bottom: 0;
    width: 100%;
    }
    Thread Starter Brooke082010

    (@brooke082010)

    THANKU THANK U!!!

    Thread Starter Brooke082010

    (@brooke082010)

    About the child theme, i created it one and it doesn’t seem to work for some reason. Got tired of playing around with it. Its there set up but when i make changes to it, it makes no changes to the site itself.

    The child theme is not activated now. Please activate it and leave it active so it can be tested.

    Thread Starter Brooke082010

    (@brooke082010)

    How do i activate it? I thought it automatically activates??

    Go to Admin->Appearance->Themes and click the ‘Activate’ button in your child theme’s thumbnail.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Sticky Footer’ is closed to new replies.