WordPress.org

Forums

[resolved] Sticky Footer (7 posts)

  1. Brooke082010
    Member
    Posted 1 year ago #

    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!

  2. vtxyzzy
    Member
    Posted 1 year ago #

    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%;
    }
  3. Brooke082010
    Member
    Posted 1 year ago #

    THANKU THANK U!!!

  4. Brooke082010
    Member
    Posted 1 year ago #

    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.

  5. vtxyzzy
    Member
    Posted 1 year ago #

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

  6. Brooke082010
    Member
    Posted 1 year ago #

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

  7. vtxyzzy
    Member
    Posted 1 year ago #

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

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.