• I have footer widgets and they are very tall, taking up a large area. I found a similar issue in this forum and pasted four recommended CSS codes to my page in the Customizing Additional CSS section, however nothing changed. Below are the CSS I used, which don’t seem to do anything. I need help to adjust the height of the footer widgets and footer bar. Thanks.

    #site-footer{padding: 5px 0px 5px 0px;}
    .site-footer {padding-top: 0;}
    .footer-widget-title {
    font-size: 24px;
    margin: 0 0 26px;
    line-height: 18px;

Viewing 5 replies - 1 through 5 (of 5 total)
  • Hi,

    You pasted css code which was respective to another site. Please check classes for your footer then try to change the classes and ids accordingly.

    Thank You

    Thread Starter cfischman

    (@cfischman)

    Okay, where do I find classes? The code I pasted was the way someone answered a nearly identical question which did not appear to be site specific to the other post.

    Well for your site open your site then press F12 an inspect window would appear.

    Provide me the site link I would improve the code accordingly.

    Thread Starter cfischman

    (@cfischman)

    Sorry for being such a web dummy. I opened the inspect window and see some references to Class, however, I don’t know what to change. I don’t have the site published yet, as it is a complete revision of an existing site. I will have to contact the host to find out how to replace and re-publish, and then how I can work on it (send links), while informing visitors it is under construction. I was hoping there would be some simple code to add to CSS that would fix the size. Below I copied responses from this site that look to be generic and not site specific. I see no reference to a specific site and the site owner was able to add the code and magically the problem was fixed. Sorry for not being a code programmer.

    bemdesign (@bemdesign)
    1 year, 8 months ago
    In your CSS, the site-footer has padding at the top and bottom of 10px (making for 20px vertical padding total). You can reduce the footer height by adjusting that padding.

    You can add custom CSS to your site through Appearance -> Customize -> Additional CSS.
    In the code field, add something like this:
    #site-footer{padding: 5px 0px 5px 0px;}

    That should reduce the footer height by half. Adjust the 5px to whatever you need to adjust the height to what looks best.

    Milan – ThemeGrill Support (@rubick322)
    10 months, 4 weeks ago
    Hi there,

    Please add the following CSS:

    #top-footer{
    padding: 10px 0;
    }

    Help link https://docs.themegrill.com/knowledgebase/where-do-i-add-my-custom-css/

    Thanks and Regards,
    Milan

    Hi,

    That’s perfectly fine. But you need to get the class name or id to change.

    It would be better if I have site link to change the classes according to it but never mind.You have to find the section class name so that you can apply the css for that class only.

    Well for that you can inspect the element and just replace with your finding classes or id’s names.

    That would work, if not let me know

    Thank you

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Footer widgets and footer bar are too tall in height’ is closed to new replies.