Footer: Reduce padding on footer elements

To tighten up the spacing and padding on footer elements you can use this code reference and customize to your needs.

Result:

Before:

Code:

/* -- code to reduce padding in footer elements -- */
/* tightens top/bottom, left/right padding */
.wrapper.site-footer {padding: 10px;} 

/* margin after main columns */
ul.footer-quicklinks li {margin-bottom: 5px;} 

/* padding above the copyright links */
ul.footer-secondary li {margin-top: 0px;}

 /* social and payment icons */
ul.footer-social li, ul.footer-payment li {margin-top: 10px;} 
/* - end - */

Mobile

You can also add this additional code to reduce spacing on mobile.

Result:

Additional mobile code:

/* -- code to tighten mobile spacing in footer -- */
@media screen and (max-width: 769px) {
    .footer-social,.footer-payment {
        margin:0px;
    }
}
/* - end - */

Where do I add the code?

Use this link to learn where exactly to add this code snippet:

Where to add your CSS style code