Footer aligning differently in Safari and Firefox

  • Hi again — I just got a helpful quick answer on a related question, but after I applied the change it worked but now the footer is aligned differently in Firefox than Safari — probably by around 100px. How do I get them aligned the same? Or what’s a good compromise solution?

    My original post — the feedback I got was to add a width:100% to the CSS, it worked brilliantly except for this new issue:

    I can’t seem to get my footer to align properly. I have three widgets, and it is aligning to the left. I would like them aligned center. It appears that the entire container is aligned to the far left. I have worked with margin-left and have been able to move it left, however on Safari and Chrome it moves the footer #3 widget below the other two, as if there is no more room for it, although there is. It adjusts fine in Firefox.

    It used to align properly in the center, and I erased the global theme customizations and the footer first disappeared and then when I re-filled the widgets they were aligned left.

    My url is lainsidertours.com/lawordpress, here is the relevant (I think) CSS:

    #footer {font-family: 'Ropa Sans', sans-serif !important; font-size:13px !important; }
#footer .container { background: #5596FB !important; border-top: 12px solid #FBBD03 !important;  }
#footer .footer-holder .add, #footer .footer-holder .add {
background: #282a2b;
border-top: 1px solid #4b4c4d;
}
#footer .case {
padding: 17px 20px 17px !important; overflow: hidden !important; margin-left:40%;  }

    Thanks so much for any help!

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

  • You may struggle with aligning it to center as wrapping div and each of the widgets floats to left. You’d probably need to remove the left float from all of them, then add text-align: center; to the wrapping div. make sure wrapper is set to display: block and col-12 and col-14 to display: inline-block;

    Thread Starter sckasher

    (@sckasher)

    I did all you said and unfortunately no luck. It ended up bunching the widgets closer together on the left.

    I now notice that the widgets are aligned center in the subpages; it’s just the homepage where this is happening. I’ve looked at it and can’t figure out what could be causing it. Any thoughts?

    Thanks again for your prompt replies!

    You have some mark-up errors in your footer – and other places – so that’s likely why you are having difficulties with the CSS – start with these – then validate again and the footer ones should become apparent:

    https://validator.w3.org/check?uri=lainsidertours.com%2Flawordpress&charset=%28detect+automatically%29&doctype=Inline&group=0

    A browser tool like Firebug shows the footer tag errors right now.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Footer aligning differently in Safari and Firefox’ is closed to new replies.