Mystique Theme – Centre all footer links

• 

  aimeebourke · Member · Oct 23, 2013 at 4:46 am

  • Copy link
  • Add topic to favorites

  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: (visible only to logged in users)

• 

  justpi · Member · Oct 23, 2013 at 7:05 am

  • Copy link

  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%;
  }

• 

  aimeebourke · Member · Oct 23, 2013 at 9:53 pm

  • Copy link

  This has put the added links in the middle of my first post over top of everything.

  The WordPress copyright footer is good though.

• 

  justpi · Member · Oct 23, 2013 at 11:22 pm

  • Copy link

  No, that happened because you removed this:

  #container {
      position: relative;
  }

• 

  aimeebourke · Member · Oct 24, 2013 at 12:59 am

  • Copy link

  Of course! im sorry i should have checked the old post to see if i had made a mistake!

  Thanks again!

  Working perfectly!

• 

  justpi · Member · Oct 24, 2013 at 1:58 am

  • Copy link

  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.

• 

  aimeebourke · Member · Oct 24, 2013 at 2:55 am

  • Copy link

  Done! Does it look better in your browser?

• 

  justpi · Member · Oct 24, 2013 at 11:35 am

  • Copy link

  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;