Footer Widgets Alignment and Spacing

Hey guys,

I’m having a couple of problems with the footer - hoping you can help :slight_smile:

Site is: https://kickstartcontent.com/

I’d like to display links to my PP and T&C pages in the footer. On desktop view, I’d like them to appear centrally above the footer credits in 2 columns (1 in each column).

To achieve this, I tried setting the footer to allow 2 columns. I then made 2 menus, one with PP in it and the other with T&C in it. I then added a widget to each footer column (Footer 1 and Footer 2) with one of the menus in each.

This is how it appears on desktop: https://kickstartcontent.com/wp-content/uploads/2017/05/Footer-1.jpg
This is mobile: https://kickstartcontent.com/wp-content/uploads/2017/05/Footer-2.png

The other issue is the amount of spacing both above and below these widgets. There’s a huge gap above them (between the last bit of content on each page) and below them (between the footer credits).

I hope I’ve explained this clearly enough. Please ask me to clarify if there’s anything that’s not clear.

Thanks so much,
Sophie

Hello Sophie,

Please try to use the following CSS code.

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

#sidebar-footer {
    padding: 0;
}

#sidebar-footer .widget {
    text-align: center;
    margin: 0;
}

.panel-row-style.panel-row-style-for-207-5 {
    padding-bottom: 0 !important;
}

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

Kind Regards, Roman.

Hi Roman,

Thanks for your reply.

That hasn’t made any difference. There’s still big white spaces and the widgets (page links) aren’t aligned.

Any ideas?

Thanks,
Sophie

Hello Sophie,

I’ve just tried to apply the CSS code above on your website with browser tools once again and it worked. How exactly you added that CSS code to your website?

Kind Regards, Roman.

Hey Roman,

I used the Custom CSS plugin and copy and pasted from your message above.

Here’s a screenshot of how it looks:

https://kickstartcontent.com/wp-content/uploads/2017/05/CSS.jpg

Thanks,
Sophie

Hello Sophie,

Can you please try to add that CSS code in Dashboard → Appearance → Customize → Additional CSS section and see if it works?

Kind Regards, Roman.