Footer Bar Image

Hi there,

try this CSS:

@media(min-width: 769px) {

    .inside-site-info,
    .footer-bar {
        display: flex;
        align-items: center;
    }
    .footer-bar .widget {
        margin-bottom: 0;
    }
    .copyright-bar {
        order: -1;
    }
    .footer-bar {
        flex: 1;
    }
    .footer-bar-active .footer-bar .widget:first-child {
        margin-left: auto;
        margin-right: auto;
        padding: 0 10px;
    }
}

Hi David, I'm trying to add 3 images to the footer bar on my site: https://brightled-3d9351.ingress-alpha.easywp.com/
I have tried to add the CSS that you indicate in your answer, however I would like to have more control over the position of each image.
Could you help me by indicating what CSS is needed to accomplish this?

In the desktop or large screen version I would like the Facebook logo to be aligned on the left, the payment processor logos centered on the footer bar and the JACH logo aligned on the right

I would like that in mobile, a single row is shown with the 3 images: Facebook logo, Payment processors (Visa, Mastercard) and JACH logo.
I am always grateful for your great help!

Hi Oscar,

I would recommend to use Generateblocks create a Block element, then CSS will not be required and easier for you to modify in the future.
https://docs.generatepress.com/article/block-element-overview/

1. Go to appearance > elements to add a new Block element.

2. Using GB to create a structure like this:
https://www.screencast.com/t/s5vRf6Qe4ROC
Then you'll be able to control the width/paddings/margins for each container for different devices.

3. Set Hook as block, choose generate_after_footer_widgesas hook, choose location depends on your needs.
https://www.screencast.com/t/aZI6VvbKH

Let me know how it works :)