[Resolved] How to reduce space between footer widgets

Home Forums Support How to reduce space between footer widgets

  • This topic has 8 replies, 6 voices, and was last updated 3 years ago by Leo.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #135400
    Cynthia Silk

    Greetings!

    How do I reduce the space between the 4 footer widgets I currently have?

    http://www.the-angel-channeler.com

    Thank you,

    Cynthia

    #135443
    bdbrown

    Hi Cynthia. By “reduce the space” do you mean you want to squeeze them all closer together towards the center, with a larger space on the far left and right sides of the footer?

    #135465
    Tom
    Lead Developer
    Lead Developer

    You can maybe try something like this:

    .inside-footer-widgets .inner-padding {
          padding: 0 20px;
    }
    #135552
    Cynthia Silk

    Hello bdbrown

    Hi Cynthia. By “reduce the space” do you mean you want to squeeze them all closer together towards the center, with a larger space on the far left and right sides of the footer?
    Yes that is exactly what I mean.

    Thank you! Cynthia

    #135554
    bdbrown

    Expanding on Tom’s CSS, I added some additional code for mobile views:

    /* reduce space between widgets */
    .inside-footer-widgets .inner-padding {
        padding: 0 20px;
    }
    
    /* push widgets right so equal outside spacing */
    .footer-widget-1 {
        margin-left: 8%;
    }
    
    /* reduce width of widget container */
    @media (min-width: 1025px) {
        .inside-footer-widgets .grid-25 {
            float: left;
            width: 22%;
        }
    }
    
    /* reduce width of widget container so all in one row on mobile*/
    @media (max-width: 1024px) and (min-width: 768px) {
        .inside-footer-widgets .tablet-grid-50 {
            float: left;
            width: 25%;
        }
    }
    
    /* center widgets in column and remove left margin */
    @media (max-width: 1024px) {
        .inside-footer-widgets > div {
            margin-bottom: 50px;
            text-align: center;
        }
        .footer-widget-1 {
            margin-left: 0;
        }   
    }
    

    Adding CSS: https://generatepress.com/knowledgebase/adding-css/

    #146196
    datafix

    Hi!

    I have a problem with footer widgets, they are all together with no spacing at all. I’ve tried the code Tom posted but it didn’t help.

    My sites address is http://datafix.dy.fi/huusholli/

    Thank you!

    #146300
    bdbrown

    @datafix – The code posted above is to reduce the spacing between the widgets. Your problem is the opposite so it would be better if you could start a new topic. Thank you.

    #392506
    Sylvia

    Hi I am having the same problem with too much space between the footer widgets. I installed simple css and added the code

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

    but nothing changed. You can view in my sandbox development site: http://ipep-genpress1.qsandbox.com/ (access code: 000).

    Thanks,

    Sylvia

    #392575
    Leo
    Staff
    Customer Support
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.