Footer Widget Centeralised

Hi, Sorry to be back so soon, but I’m nearly finished!

I want all of my footer widgets to be aligned to the center of the page, but not text-center’d (I did try searching but can’t seem to find my issue) I have included a screenshot to explain what I am trying to do

Website is tymcooper.xyz again :slight_smile:

Also with Sydney Widget Contact Info; The text doen’t align between lines, if you have 2 lines of information. So I’ve been using an alternative plugin (But as you can see its ugly as hell) Is there any way I can fix that?

Thank you again,
Tym

Hi,

1.You can only center the widgets if you align the text to center, they are now left-aligned, that’s why they aren’t centered, or alternatively you can right align the last widget and center align the middle widget, that will be a good solution too, below you can find Custom CSS for both:

text-center:

.footer-widgets {
    text-align: center !important;
}

last widget aligned right and middle widget aligned center:

.sidebar-column:nth-child(2) {
    text-align: center;
}

.sidebar-column:nth-child(3) {
    text-align: right;
}

2.You can fix the icon list misalignment issue with this Custom CSS:

.footer-widgets .fa-ul {
    margin-left: 0 !important;
}

.footer-widgets .fa-li {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    vertical-align: middle !important;
    display: inline-block !important;
    text-align: left !important;
    width: auto !important;
    margin-right: 10px !important;
}

Please add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also add the CSS to wp-admin -> Appearance -> Customizer -> Additional CSS so you won’t loose the changes after Theme or WordPress updates.

Please let me know how it works.

Kind Regards,
Csaba

Hi Csaba,
Thank you, that’s genius! I’m starting to understand this a little!

My only remaining problem is the aligning of the text, sorry it’s a little hard to explain but I’m trying to make the second line indent, so I have ‘drawn’ a picture, if their is anyway to correct this that’d be awesome!

Capture

Hi,

You can do change the display of the first list item to flex and modify the position of the icon to achieve that by adding this Custom CSS too:

.footer-widgets .fa-ul li:nth-child(1) {
    display: flex !important;
}

.footer-widgets .fa-ul .fa-home {
    margin-top: 5px !important;
}

Please let me know how it works.

Kind Regards,
Csaba

Thank you! Thats brilliant :slight_smile:

Hi,

Great! You’re most welcome! If you need help with anything else, please open a new topic.

Have a good day!

Kind Regards,
Csaba