Need help? Check out our Support site, then


Mystique Theme - Centre all footer links

  1. Hi!

    I would like to centre all of the footer links i have there... I ended up adding more so if people have a different setting to make their page bigger/smaller, sometimes the links overlap each other.

    Thankyou :)

    The blog I need help with is ancestrypuzzlesuntangled.com.

  2. Turn this:

    #footer #copyright {
        text-align: right;
    }

    to:

    #footer #copyright {
        padding-top: 2em;
    }

    Then turn this:

    #text-5 {
        bottom: 7px;
        left: 20px;
        position: absolute;
    }

    to:

    #text-5 {
        bottom: 28px;
        left: 0;
        position: absolute;
        text-align: center;
        width: 100%;
    }
  3. This has put the added links in the middle of my first post over top of everything.

    The WordPress copyright footer is good though.

  4. No, that happened because you removed this:

    #container {
        position: relative;
    }
  5. Of course! im sorry i should have checked the old post to see if i had made a mistake!

    Thanks again!

    Working perfectly!

  6. You're welcome.

    Explanation:
    position:absolute, bottom:28px means place the content of that text widget 28px above the bottom of something. The code you had removed makes it mean 28px above the bottom of the content area. Without that code, it turned into 28px above the bottom of the browser window.

    A couple of other suggestions:
    You have added this (thanks to thesacredpath):

    #footer-widget-area .widget-title {
        background-color: rgba(0, 0, 0, 0);
        background-image: url("http://ancestrypuzzlesuntangled.files.wordpress.com/2013/10/website-footer-title-background1.jpg");
        background-size: 100% 100%;
        color: #FFFFFF;
        letter-spacing: -0.5px;
        padding: 11px 5px 6px;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
        text-transform: uppercase;
    }

    Turn this line:
    background-size: 100% 100%;
    to this:
    background-size: 100% auto;
    to eliminate the squashed triangle and the grey stuff that shows below the blue bg,
    and add this line:
    font-size: 16px;
    to decrease the font size a little, because in some browsers your "Hours!" drops into a second line.

  7. Done! Does it look better in your browser?

  8. I don't use only one browser!
    The discrepancies are due to the negative letter spacing. Also, I find the left padding too little and the bottom padding too much. So I would suggest you
    a) remove this line:
    letter-spacing: -0.5px;
    b) turn the font size to 15px
    c) turn the padding to this:
    padding: 10px 0 0 10px;

Topic Closed

This topic has been closed to new replies.

About this Topic