How to decrease Footer height?

Hello again!
I can’t seem to find a way to decrease the height of the footer on any page. If you go http://www.speakup.healthcare/get-involved/ for example, you’ll see that there’s this very large area being consumed by the footer, even though the largest widget doesn’t take that much space.

How can I go about decreasing the size of this footer such that it is equal to the size of the largest widget in the footer? (Which in my case would be the Sydney Contact Widget)

Thanks in advance! The support on this forum is awesome :slight_smile:

Best,
Matt

Hi Matt,

This theme has default settings for the footer top/bottom padding to 95px. You can adjust those padding using the following css code:

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

You can use simple custom css plugin to put the code in above.

Regards,
Awan

Worked perfectly! Thanks so much.

This post is ideal for me as I have the same problem. I am not as advanced but I am doing Ok with this template. Where do you put that little bit of code? Which file? Can I edit it in DW or shall I pull it up in appearances, edit and then the theme footer file?

Guy

Hi Guy,

You can use Simple custom CSS plugin or similar plugin to put the code.

Regards,
Awan

Sorry to sneak in but I have the same problem and didn’t know how to start a new post…

It doesn’t work for me by putting the code you suggested.

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

In fact, any entry in css file in child theme doesn’t seem to work. The footer.php modification did take an effect without any problem.

Could you help?

:frowning: it seems to be working now… something happened.
Please ignore my post and accept my apologies.

Thank you Roman, so nice of you.

Is there anyway to reduce the height further? or that is now the standard height and can’t go lower than that?

Hi @w.k,

If you meant that you want to decrease the height of the footer widget area, you can use this CSS code:

.footer-widgets {
    padding-top: 10px;
    padding-bottom: 10px;
}

or its for the Credit theme area, use this:

.site-footer{
    padding-top: 5px;
    padding-bottom: 5px;
}

Feel free to adjust the value of the padding-top and padding-bottom from the code in above.

Regards,
Awan

Thanks! It solved my problem.

1 Like

Hello, how can I reduce the footer width on mobile view on my site http://perfectmediaqa.com
I would also like to reduce the menu area on mobile as well as social icons row. The mobile view of my website looks so unprofessional but the desktop version is brilliant

Hi @perfectmedia

Here is the css code to reduce the width of the footer and centering it:

@media only screen and (max-width: 767px){
  .site-footer {
    width: 75%;
    margin: 0 auto;
    text-align: center;
}

you can put the code into: Customize > additional CSS.

Then about the menu, I think its not a good idea to reduce its width because there will have a blank space on the left and right of the menu. see this http://prntscr.com/fhl5bg

Regards,
Awan

Thanks awan. You’re supreme :slight_smile:

1 Like