Size changes in the footer widget

Please help me to make some size changes in the footer widgets.

  1. 1st widget - text to be in one line
  2. 2nd widget - icons (visa, master) centered
  3. 3rd widget - fb, instagram and others centered
  4. 4th widget - envelope size to be bigger like fb, youtube icons

Thank you in advance.
Regards, Naira

Hi Naira,

Could you please to share your site URL here? So, I can check it directly.

Regards,

H Awan,

Nice to see you:)

Here you go:

.footer-widgets{
    text-align: center;
}

.footer-widgets .sidebar-column:nth-child(4) .fa-envelope {
    font-size: 25px;
    margin-top: 5px;
}

.footer-widgets .sidebar-column:nth-child(4) a {
    top: -6px;
    position: relative;
}

@media (min-width:1024px){
    .footer-widgets .sidebar-column:nth-child(1), .footer-widgets .sidebar-column:nth-child(4) {
        width: 32%;
    }

    .footer-widgets .sidebar-column:nth-child(2), .footer-widgets .sidebar-column:nth-child(3) {
        width: 18%;
    }

    .footer-widgets .sidebar-column:nth-child(4) {
        text-align: right;
    }

    .footer-widgets .sidebar-column {
        padding: 0;
    }

}

Add the code to Customize > additional CSS.

Regards,

Dear Awan, hi,

Thank you so much for the perfect codes!
Also, please help me to increase the size of footer bottom area (under icons). So, the icons will be in the center of the footer area.

Site:
Now, my codes for this area are:
.footer-widgets {
padding:10px 0;
}
.footer-widgets{
text-align: center;
}

Best Regards, Naira

You can change this code:

.footer-widgets {
padding:10px 0;
}

to this:

.footer-widgets {
    padding-top: 10px;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 30px;
}

Thank you, dear Awan.

Is it possible to minimize the padding-bottom area?

Even if I mention (padding-bottom: 0px):

.footer-widgets {
padding-top: 20px;
padding-left: 0;
padding-right: 0;
padding-bottom: 0px;
}
It looks like

Hi,

Try this:

.footer-widgets .widget {
    margin-bottom: 20px;
}
.site-footer {
    display: none;
}

Perfect code! Thank you!

1 Like