Footer widgets aren’t evenly spaced on mobile view

Hello Jen,

Please try to use the following CSS code.

You can add CSS code in Dashboard → Appearance → Customize → Additional CSS (WordPress 4.7 and up). Also you can add CSS code directly to style.css file of your child theme.

@media only screen and (max-width: 767px) {
    #sidebar-footer .sidebar-column:nth-child(2) {
        margin-top: 30px;
        margin-bottom: 30px;
    }
}

Kind Regards, Roman.

Thanks Roman although this code hasn’t made any difference, it’s the gap between the end of widget 1 and the title of widget 2, and the end of widget 2 and the title of widget 3 where the gap needs to increase?
Thanks again,
Jen

Hello Jen,

Can you please describe how you added the code? I don’t see it in your Simple Custom CSS plugin stylesheet.

Kind Regards, Roman.

Thanks Roman, as the CSS didn’t work I deleted what I had typed from the Simple Custom CSS page, however I’ve re-typed it in now – are you able to take a look? I believe I have replicated the code you provided.

Thank you,
Jen

Hello Jen,

The problem is in previous rule (closing curly bracket “}” is used instead of opening curly bracket “{“):

nav#site-navigation,
nav#site.navigation.menu-naviation ul }
}

And there is a typo in margin:bottom: 30px;, it should be margin-bottom: 30px;

Please remove or fix problematic rule, correct the typo, and see if it helps.

Kind Regards, Roman.

• This reply was modified 7 years, 9 months ago by Roman Bondar.
• This reply was modified 7 years, 9 months ago by Roman Bondar.
• This reply was modified 7 years, 9 months ago by Roman Bondar.

Oh yes, that’s sorted it, thank you! I found that it helped the spacing between footer 1 and 2, and by replicating the code and replacing child(2) with child(3) it also sorted the problem between footers 2 and 3 (for anybody else with the same issue).

Thanks so much Roman!

Jen

You are welcome Jen!

However, you still didn’t correct margin:bottom: 30px; row. The code that I provided above had to fix both spaces. Please replace this with my code above (you can just copy and paste, it should be easier):

@media only screen and (max-width: 767px) {
  #sidebar-footer .sidebar-column:nth-child(2) {
    margin-top: 30px;
    margin:bottom: 30px;
  }
}
@media only screen and (max-width: 767px) {
  #sidebar-footer .sidebar-column:nth-child(3) {
    margin-top: 30px;
    margin-bottom: 30pm;
  }
}

Kind Regards, Roman.

Thank you I’ve fixed that, for some reason it doesn’t let me paste so I have to re-type, hence the typo!

Thanks for all your help, there is just the issue of centering the menu items on one line (in another thread) and then I hope to leave you in peace for a while!

Thanks for your patience.

Jen

You are welcome Jen, as far as I can see typo is still there. But you can leave it as it is if you are satisfied with the result.

Kind Regards, Roman.