Text alignment in footer widget

Hi there,

I’m working on the footer area of my website, currently using four widgets at the bottom of it. I managed to center these four widgets with the following code:

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

Now it looks like this:

I was very happy with the result, but then I noticed the “Contact” footer text wasn’t aligned. I mean, the text is aligned to the center, but it looks like the three items are not aligned with each other. Please refer to the red line I drew on the screenshot so you can see what I’m talking about.

I’d like to keep this widget centered, but I’d also like to have the three items aligned with each other. Could you please tell me if there’s any way to achieve this? Please let me know if you need more information.

This is my website: http://stsloc.com

Thanks in advance!

Cheers,

Luciano

Hello Luciano, try to use the following CSS code.

You can add CSS code in Customize → Additional CSS section.

@media (min-width: 992px) {
    #sidebar-footer .sidebar-column:first-child {
        text-align: justify;
    }
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.
aThemes Support

1 Like

Hi Roman,

Thanks a bunch for your reply!

The code worked, but unfortunately, it wasn’t what I was expecting.

The footer section now looks like this:

It looks good, as the three items below the “Contact” title are now aligned with each other, but the bad news is that the whole “Contact” footer moved to the left, and I’d like to keep it centered as the rest of them.

The following is a modified image of how ideally it should look:

In the above image, the “Contact” title is centered, and so are the three items below it, only this time they are aligned with each other. I drew a red line next to them so you can see this.

Is there a way to keep the “Contact” title centered and adjust the three items below it so they can be aligned with each other and look like they’re centered too? Please let me know if this is possible.

Thank you for your patience!

Cheers,

Luciano

Hello Luciano, try to use this CSS code instead of the previous one:

@media (min-width: 992px) {
    #sidebar-footer .sidebar-column:first-child .textwidget {
        text-align: justify;
    }
}

Kind Regards, Roman.
aThemes Support

1 Like

Hi Roman,

Sorry for my late reply. Thank you very much, the code worked like a charm this time! :slight_smile:

I also set a 20px left padding to your code, like this:

@media (min-width: 992px) {
#sidebar-footer .sidebar-column:first-child .textwidget {
text-align: justify;
padding-left: 20px
}
}

And now the footer looks just like I wanted. Cannot stress enough how much I appreciate your help! Thanks a lot!

Cheers,

Luciano

1 Like

You are welcome Luciano! :slight_smile:

Kind Regards, Roman.
aThemes Support