[Support request] Add a separator between the footer widgets

[Mike]

I need to add a couple of separator lines between the footer widgets but i can’t figure out how to do this. So my footer contains four widgets and i need a separator line between widgets 1 and 2 and a separator line between widgets 3 and 4. I can’t add a border because the line needs to be about 2/3 the height of the widgets.

My backup plan is to turn off the default footer and create a custom one using elements but I thought I would ask just in case.

Cheers
Mike

[Fernando]

Hi Mike,

Here is a CSS code you may try adding in Appearance > Customize > Additional CSS:

.inside-footer-widgets>*:nth-last-child(even) {
    border-right: solid 1px rgb(0,0,0);
}

Kindly modify the values to your preference. You may also modify even to odd or border-right to border-left if the border is in the wrong location.

If this doesn’t work, perhaps you can provide the link to the site in question, and I’ll try to figure out an appropriate solution?

You may use the private information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Hope to hear from you soon. 🙂

[Mike]

Hi Fernando,

Thanks for getting back, no that’s not going to work as the separator needs to be 2/3 the height of the widget so a border will not be any good. I ideally need to insert an additional element between the widgets, do you know if this is possible?

Thanks
Mike

[David]

Hi there,

try this CSS:

@media(min-width: 1024px) {
    .inside-footer-widgets > div:not(:last-child) {
        position: relative;
    }
    .inside-footer-widgets > div:not(:last-child):after {
        content: '';
        position: absolute;
        width: 1px;
        right: -20px;
        top: 17%;
        bottom: 17%;
        background-color: #000;
    }
}

[Author]

Posts