Footer Widget Centeralised

Sydney
#1

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

Untitled
Untitled.png1678×616 58.3 KB

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

#3

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

#4

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

#5

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

#6

Thank you! Thats brilliant :slight_smile:

#7

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

#8