This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Tagged: , ,

Footer has shifted slightly right?

  • Creator
    Topic
  • #7752
    socialkenya
    Member

    Well, my client changed her mind and now wants the dark green footer color to run across the entire width of the screen, so I removed the custom CSS that kept the footer within the same area as the body wrapper. But, strangely enough, the footer now shifts several pixels to the right, making the whole page look odd.

    Here’s the custom CSS I’m using to give the footer the green color she wants:

    .body_text_light #footer_sub_content {background: #447114; width: 100%;
    }

    (This is the same for .body_text_dark as well.)

    I can’t see anything there that should push the footer off-center, but here are some screen shots to show what I’m getting and what shows up when I inspect the element:

    http://tinypic.com/r/2yuni8y/4

    http://tinypic.com/r/wqosg1/4

    No clue why this is happening. I didn’t actually change any code when I noticed the shift. I opened the front page before making the footer full-width and noticed the shift.

    Thanks,
    JC

Viewing 2 replies - 1 through 2 (of 2 total)
  • Author
    Replies
  • #7764
    Jason Bobich
    Keymaster

    By inspecting with Chrome, you can see that this div has 10px right/left padding, and so by setting width to 100%, your result is going to be 10px + 100% + 10px because of the basic box model.

    http://www.w3schools.com/css/css_boxmodel.asp

    But I’m not sure why you’re putting on the 100% width in the first place. If you just remove the width attribute you’re adding in your custom CSS it should sit fine. (I notice you have it in two different places)

    #7770
    socialkenya
    Member

    Yup. That nailed it. I tried several width code options but found that setting the width in pixels made the footer shrink smaller than the body wrapper when viewed on a tablet or mobile device, so I decided to go to 100%. Now I see that “auto” does the job perfectly.

    Learn something new every day.

    Thanks,
    JC

Viewing 2 replies - 1 through 2 (of 2 total)

The forum ‘Akita Responsive WordPress Theme’ is closed to new topics and replies.