Balance Theme Footer Background (reduce the length)

Community Forums Forums Design Tips and Tricks Balance Theme Footer Background (reduce the length)

This topic is: not resolved

This topic contains 4 replies, has 2 voices, and was last updated by  lianam 1 year, 5 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #34542

    lianam
    Participant
    Post count: 24

    Hi there! I’m using the Balance theme for this site. At the bottom in the footer area there is a light gray background that goes across the entire length of the screen/site. How do I resize this so that it matches up with just the length of the main body/content area of the site (the white area)? Thank you!

    #34605

    Robin
    Participant
    Post count: 318

    If you go to line 1544 in your style.css and change the following:
    #footer-widgets {
    background: url(images/gray-texture.jpg);
    clear: both;
    margin: 0 auto 20px;
    padding: 25px 0;
    overflow: hidden;
    width: 960px;
    }

    I changed the width to match the area above, and then added auto to the margin to center it. This doesn’t change the width of the footer widgets or their padding, so I see that you will need to address that (footer widget #1 is pushed all the way to the left, for example). HTH


    I do the best I can with what I’ve got. (say hey on twitter)

    #34618

    lianam
    Participant
    Post count: 24

    Hey Robin! Thanks so much! This helped and I added padding to the footer widget #1. It’s now pushed in (rather than to the left liked before) but it’s also pushed down so it no longer lines up with the other footer items. Any idea what to do in this case?

    #34665

    Robin
    Participant
    Post count: 318

    If you change your padding to padding: 0 20px; that will move it back up in line with the others. Actually I messed with those numbers just a bit to see if I could make it look the same distance from the left margin that the search button is from the right and came up with:
    .footer-widgets-1 {
    float: left;
    margin: 0 20px 0 0;
    width: 295px;
    padding: 0 30px;
    }

    Just a suggestion. (The margin is currently 0 40px 0 0 and bringing that down a bit and the padding up a bit helps me visually, at least.)


    I do the best I can with what I’ve got. (say hey on twitter)

    #34677

    lianam
    Participant
    Post count: 24

    Robin, it’s perfect!!! Thank you so, so very much for your help.

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

You must be logged in to reply to this topic.