Tagged: 

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • May 5, 2014 at 6:16 pm #260395
    CurlyHost

    I recently asked how to get the footer items to be stacked and centered and it worked lovely:

    #socket .container > * {
    float: none;
    left: 50%;
    -webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    transform: translate(-50%,0);
    position: absolute;
    width: 555px;
    text-align: center;
    }

    http://www.thewoodbeckteam.com/

    I’m using WordPress multisite and when I duplicated the same code in the subdirectory site it cut off half the footer area:

    http://www.thewoodbeckteam.com/woodbeck-properties/

    Specifically the “position: absolute;” line of code seems to be the thing causing the change – but when I change it to something like “relative” it comes back but misaligned.

    Any ideas of what is causing this or how I might fix it across the subdirectory?

    May 6, 2014 at 7:11 am #260590
    Ismael

    Hey Andrea!

    Thank you for the info.

    Please add this to fix the cut off area of the footer:

    #socket {
padding-bottom: 20px;
}

    Regards,
    Ismael

    May 6, 2014 at 4:21 pm #260791
    CurlyHost

    Hmmm, that addresses why that one line gets cut off, but doesn’t explain why it doesn’t show the rest of the footer – the socket and copyright text aren’t showing up unless I remove the position: absolute; line in the above code. That same code works fine http://www.thewoodbeckteam.com/

    May 7, 2014 at 3:26 am #261052
    Ismael

    Hey!

    Thank you for the info.

    I think it’s not working because of the images that you added. Those are not present when we suggested the code on another topic. Do you mind providing a screenshot on how you want the footer to look like?

    Best regards,
    Ismael

    May 7, 2014 at 4:42 pm #261372
    CurlyHost

    Bummer, now it’s not working on the root domain. Okay, back to square one. I took away this code:

    #socket .container > * {
    float: none;
    left: 50%;
    -webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    transform: translate(-50%,0);
    position: absolute;
    width: 555px;
    text-align: center;
    }

    But added this instead:

    #socket .container > * {
    left: 50%;
    -webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    transform: translate(-50%,0);
    width: 555px;
    text-align: center;
    }

    #socket .copyright {
    float: right;
    }

    And it’s back to where it was.

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Footer items stacked and centered in Enfold’ is closed to new replies.