Footer alignment for mobile devices

Hi there!

It’s me again; sorry to be a bother, but I was wondering if you could help me with the alignment of the Contact footer, as it looks kind of disorganized on the mobile version.

Let me show you. The Contact footer on my website looks like this (I drew a red line so you can see what I’m talking about):

footer actual

Ideally, I’d like it to look like this, the three of them right on top of each other (again, this is a modified screenshot):

footer ideal

Website: http://stsloc.com/

Could you please tell me if there’s a way to achieve this?

Thanks in advance!

Cheers,

Luciano

Hello Luciano,

Your website doesn’t seem to be working, can you please check it and leave here a note when it’s live?

Kind Regards, Roman.
aThemes Support

Hi Roman,

Hope you’re doing fine. :slight_smile:

That’s weird, I just checked my website and it’s actually live. Could you please check back again and let me know if you still have any issues?

Cheers,

Luciano

Hello Luciano,

That’s weird, I just checked my website and it’s actually live. Could you please check back again and let me know if you still have any issues?

Okay, I was able to access it through VPN. You can try to add this CSS code in Customize → Additional CSS section:

#sidebar-footer .sidebar-column:nth-child(1) .textwidget div {
    display: inline-block;
    text-align: left;
}

Please note that CSS code will affect all the text widgets in your first footer column (currently you have one text widget there). I had to target it like this because you didn’t add any classes/IDs in your HTML within that text widget.

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

Kind Regards, Roman.
aThemes Support

1 Like

Hi Roman,

Thank you very much, I tried your code and it worked perfectly! :slight_smile:

If you don’t mind me asking, could you please explain to me in which way this code could affect all the text widgets in the first footer column? I checked and double-checked, and it doesn’t seem to have affected or changed anything, at least in the way the footer is being displayed.

Thanks again!

Cheers,

Luciano

Hello Luciano,

If you don’t mind me asking, could you please explain to me in which way this code could affect all the text widgets in the first footer column?

It depends on the widget itself and its content, so I can’t tell you what might happen.

However, I suggest you to add a class to your <div> element within that widget (for example footer-contact-widget, so you’ll get <div class="footer-contact-widget">), and use this selector:

#sidebar-footer .sidebar-column .footer-contact-widget

…instead of this (in my code above):

#sidebar-footer .sidebar-column:nth-child(1) .textwidget div

In this case you will target that widget specifically.

Kind Regards, Roman.
aThemes Support