How to adjust footer widgets padding, margins and spacing

Sydney
#1

Hi there,

My site is ivalambova.com

I was wondering if I can get help with the adjustment of the footer widgets. There are a contact, menu, posts and social icon widgets in the footer.

You can have a look at the screenshots here

  1. On desktop, the spacing between the widgets is unequal and I would like to have them equally spaced and with the same font size.

  2. On mobile, some of the widgets are placed on the left and others on the right. And if possible I’d like to have them either all on the left or all in the centre.

Let me know if that’s possible. Many thanks for your help!

Best,
Iva

#2

Hi Iva,

Spacing is fine except that icons are aligned to the right by default, and text in other widgets is left aligned:
top and bottom padding is the same https://www.screencast.com/t/Mp8HACiT but text which is smaller in copyright area is in middle so it is normal that it will look like sections are not equally spaced. Also, footer widget columns have same width of 25% https://www.screencast.com/t/HWluzoOUZa

  1. For desktop I can only suggest to align text to center with css code below:

    div#sidebar-footer {
    text-align: center;
    }

    .site-footer {
    padding-top: 0;
    text-align: center;
    }

    div#sidebar-footer .so-widget-sow-social-media-buttons-wire-8ef984fd3aa2 .social-media-button-container {
    text-align: center;
    }

And that code will center items on mobile also - result:


You can apply that code from Appearance > Customize > Additional CSS field.

Best Regards!

1 Like
#3

Hi @dimikjones! Many thanks for your reply and help.

Is there a way that I can use the suggested solution for mobile only?

Best,
Iva

#4

Hi again,

Off course, just wrap that code with media query in order to limit it to smaller screens, to target iPad in portrait view and below use 768px value like this:

@media screen and (max-width: 768px) {
    div#sidebar-footer {
        text-align: center;
    }

    .site-footer {
        padding-top: 0;
        text-align: center;
    }

    div#sidebar-footer .so-widget-sow-social-media-buttons-wire-a1e7c0244235 .social-media-button-container {
        text-align: center;
    }
}

Regards,

1 Like
#5

It works perfectly @dimikjones! This was a very useful input. Thank you one more time for all the help and effort.

Best,
Iva