Footer Centering Issue

  • Resolved KMLProxy

    (@kmlproxy)


    14 years, 3 months ago

    Hello,

    I’ve added four icon-links in my footer, directly in the footer.php and style.css, as seen here:

    https://www.thepoliticalpodium.com/

    The icons have caused the normal footer information to be shifted ever-so-slightly off center to accommodate for the space they take up. How can I reverse this so that the normal data is exactly centered, as it was prior to adding the icons? I attempted to add a z-index property to my four icons in the style.css, with a property value of 50000, but this didn’t change anything.

    Any ideas?

    Thanks,
    KML

Viewing 5 replies - 1 through 5 (of 5 total)
  • DigitalSquid

    (@twelvefootsnowman)

    The easiest way would be to use CSS to add margin or padding to the right side of the footer div that’s equal to width of the 4 icons. For example:

    .art-footer-text {
    margin-right: 165px;
    }

    Or you could also move the icons out of the footer paragraph and use absolute positioning to place them over the footer. That way they’d have no effect on the positioning of the copyright text.

    Thread Starter KMLProxy

    (@kmlproxy)

    Thanks, that did the trick as far as centering…

    However, after having modified that value within my stylesheet, the footer section itself has become taller, as well… any ideas as to how to counter that? You’ll see now that the icons are not sized right to take up the space, and though I could make them bigger, I’d prefer to have the thinner footer that they were originally sized for… not entirely sure why just modifying the margin: 0px to margin-right: 130px would have resulted in the footer becoming thicker.

    Thanks,
    KML

    DigitalSquid

    (@twelvefootsnowman)

    Ah! The original “margin: 0px” set all of the margins for that div, the new code only affects the right margin so it’s inheriting the other margins (top, left and bottom).

    Try replacing
    margin-right: 165px;

    With:
    margin: 0 165px 0 0;

    That way it will set all the margins, not just the right one.

    Thread Starter KMLProxy

    (@kmlproxy)

    Perfect! Needed to add the ‘px’ to each value, but that worked splendidly.

    Thanks so much for your help!

    Thread Starter KMLProxy

    (@kmlproxy)

    Hmm… I recently made some changes to my theme within my theme editing software, and am having the same issue where the footer area is taller than it previously was, even with:

    .art-footer .art-footer-text p
    {
    margin: 0px 100px 0px 0px;
    }

    as the code… any suggestions, please?

    https://www.thepoliticalpodium.com

    Thanks,
    KML

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