[Support request] Footer Bar Image

Home Forums Support [Support request] Footer Bar Image

Home Forums Support Footer Bar Image

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1614115
    Ash

    Hi,

    I have copyright and a reviews widget in the footer bar. I would like to add payment methods image in the center, I have added it but can’t seem to get it to sit center between the other two widgets, any ideas?

    Thanks

    #1614231
    David
    Staff
    Customer Support

    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;
        }
    }
    #1623978
    Oscar

    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!

    #1624043
    Ying
    Staff
    Customer Support

    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 🙂

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.