Footer size

Support Area Forums United Footer size

This topic contains 7 replies, has 2 voices, and was last updated by  Bill Robbins 3 years, 1 month ago.

Viewing 8 posts - 1 through 8 (of 8 total)
URL to the page in question: http://servingyourpurpose.com
  • Author
    Posts
  • #19890

    Ashley Davis
    Participant

    Bill,

    I’d like to change the footer background to stretch all the way across the screen, like the menu background does. What’s the easiest way to do this?

    Thanks,
    Ashley

    #19900

    Bill Robbins
    Keymaster

    Ashley,

    That can be tricky because fixing a footer to the bottom of the screen is not quite as simple as it is with the header. One a page with a small amount of content, the footer can end up far from the bottom which can look a bit unusual.

    But you can give it a shot. You’ll need to edit the footer.php file and find this line:

    
    </div><!--#wrap -->
    

    and move it so that it’s right above this:

    
    <?php tha_footer_before(); ?>
    

    and save your changes. You’ll need a bit of CSS too. Something along these lines:

    
    
    #footer {
    	background-color: #ffffff;
    }
    
    #footer-content {
    	width: 960px;
    }
    
    @media only screen and (min-width: 768px) and (max-width: 1023px) {
    
    	#footer-content {
    		width: 700px;
    	}
    
    }
    
    @media only screen and (max-width: 767px) {
    	
    	#footer-content {
    		width: 90%;
    	}
    
    }
    

    See how that works for you.

    #19907

    Ashley Davis
    Participant

    Looks great on every page except the Staff page- it doesn’t stay at the bottom, but scrolls

    up.http://servingyourpurpose.com/meet-the-beshears/

    Also, any way to center the links & navigation in the footer like the header?

    #19912

    Bill Robbins
    Keymaster

    Sorry I though the theme had another div in the footer. We’re on vacation in Mexico so I’m not quite on top of things at the moment.

    Try replacing the footer.php file with this:

    which should add in a div to keep the left and right side of the footer from going all the way to the edge of the screen and prevent the scrollbars hopefully.

    #19929

    Ashley Davis
    Participant

    So sorry to interrupt your family time, that’s the worst part about running your own business.

    Didn’t seem to fix the staff page.
    And any way we can move the Copyright/Organized Themes link to the right/center?

    Thanks so much Bill!

    #19949

    Bill Robbins
    Keymaster

    Ashley,

    If you happen to be a Mac user, you might take a look at a program called Espresso. One of it’s best tools is the ability to live edit the CSS used on a site. That way you can see what properties are applied to something and then see what it would look like if you changed them. That’s how I track down changes for my customers.

    See if this doesn’t help out the footer a bit for you:

    
    #footer {
    	max-width: 100%;
    	margin-left: auto;
    	margin-right: auto;
    	margin-bottom: 0;
    }
    
    #footer-left,
    #footer-right {
    	overflow: hidden;
    	float: none;
    	width: 100%;
    }
    
    ul#menu-footer-menu {
    	margin-bottom: 10px;
    }
    
    ul#menu-footer-menu li {
    	float: none;
    	display: inline-block;
    }
    
    #footer-content {
    	text-align: center;
    	margin-left: auto;
    	margin-right: auto;
    }
    

    Have a nice weekend,
    Bill

    #19984

    Ashley Davis
    Participant

    Hmm… the footer is still sticking to the bottom of the Staff images and floats up when scrolling down.

    #19989

    Bill Robbins
    Keymaster

    Ashely,

    If you need to have the footer be full width with a different colored background and have it stick to the bottom of the screen, that’s not easy to achieve. I’m not even certain it’s possible in this case. You could try absolutely positioning the footer. The CSS for that could look like this:

    
    body {
    	height: 100% !important;
    	position: relative;
    }
    
    body #footer {
    	position: absolute;
    	left: 0;
    	width: 100%;
    	bottom: 0;
    	z-index: 20;
    }
    

    Hopefully that will move you closer, but I’m not certain this will work.

    Have a great week,
    Bill

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘Footer size’ is closed to new replies.