Css issue

Hello,

In firefox, right click on one of the social icons at the bottom of the page. Click on inspect with firebug. Start going up through the parent elements for the icons. For example If you start on the icon ‘img’ tag, go up through ‘a’, then ‘p’ then ‘<div class=”textwidget”>, and check for margins, or padding.

When you get to the div with the widget-wrapper class, you will see there is a margin of 40px on the top.

When there is just margin: you can enter the margin for each side on a single line.

See Margin Shorthand on this page:
https://www.w3schools.com/css/css_margin.asp

Remove the margin for the top of that element.

Continue up the levels of HTML and once you get to footer, you’ll see it has a padding set to the top of 50px. Remove the padding for the top of the footer and your icons will be closer to the text!

Thanks mate, I can usually fumble around but need the expert help ??

As explained above, that space is partly due to the padding in this CSS:

footer {
    clear: both;
    font-size: 12px;
    overflow: hidden;
    padding: 50px 0;
    text-align: center;
    width: 100%;
}

So try adding this to your custom CSS (if it’s not built in to your theme, you an add it via a plugin such as JetPack):

footer {
   padding: 0;
}