🎉 Happy 4th of July! Get 15% off GP Premium with the discount code: 4THOFJULY2020

[Resolved] Aligning logos at footer with custom background color

Home Forums Support Aligning logos at footer with custom background color

  • This topic has 11 replies, 3 voices, and was last updated 5 months ago by David.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1147704
    ch1800

    Hi folks,

    I need to have a series of logos at footer, all centrally aligned and with custom background color (other than the main site background color).

    I have temporarily placed them inside 5 widgets but might get more than 5 in the future.

    What would be the best solution for having more than 5 logos in a single line, all aligned in center with a custom white background (instead of the current blue)?

    Should I use Elements or something else for doing so?

    Thanks!

    #1147712
    Leo
    Staff
    Customer Support

    Hi there,

    I would say hooks element with columns would be the way to go.

    You can use similar HTML here to create columns:
    https://docs.generatepress.com/article/split-header-three-sections/

    And the before_footer hook should work:
    https://docs.generatepress.com/article/hooks-visual-guide/

    Let me know if this helps 🙂

    #1147729
    ch1800

    Thanks Leo but I’m a bit lost here.
    Your first example is for headers – how to use it for the footer?

    As for the second example “before_footer” I really don’t well understand how to use it.
    I get the examples but which code to use and where exactly?

    #1148079
    David
    Staff
    Customer Support

    Hi there,

    are you going to need the Footer Widgets for any other purpose ?
    If not then you can add all your logos to the first widget and we can provide some CSS to make the first widget into a single row.

    #1148129
    ch1800

    Thanks David,
    I also think that would be the best idea as I won’t need the footer widgets for anything else.
    And if later they change their minds and want to add something else in there I’ll have the time to learn more about Elements as I never used them before and I’m a bit lost.

    If possible, I would need all logos (6 in total) in a single row, centered both horizontally and vertically because they are of different sizes and heights.

    Also, they asked to have the whole strip with the logos on a white background, while the remaining background of the pages keeps the same blue background.

    The next thing I’m lost with is that they might want also to add a couple of logos at header, left side above the navigation but I’ll try my best to avoid this mess as you already provided some time ago the CSS for having the main logo at right side as it is currently. Will keep that for another ticket…

    Many thanks!

    #1148442
    Leo
    Staff
    Customer Support

    Can you add all 6 logos under one footer widget (footer widget 1) first?

    And it would be good to open another topic for the header logo.

    Let me know 🙂

    #1148746
    ch1800

    Just added them, thanks!

    #1148765
    Leo
    Staff
    Customer Support

    Try this CSS:

    .footer-widgets .footer-widget-1 {
        display: flex;
        align-items: center;
        background-color: #fff;
    }
    #1149080
    ch1800

    Thanks Leo,

    That seems to work nicely but I had to add titles for the first and last image (currently active online) and there is a problem with the last image title that displays lower than the first one.

    Other than that, I struggle a bit making left & right padding to correspond to the page’s margins and also I see that the last image is slightly cut at its right side. That happens also if I remove its title.

    Any clues?

    #1149177
    David
    Staff
    Customer Support

    Wow those titles made it a tough little puzzle lol – try this CSS instead:

    .footer-widgets {
        padding: 0;
        margin-bottom: 60px;
    }
    
    .site-footer .footer-widgets-container .inside-footer-widgets {
        margin-left: 0;
    }
    
    .footer-widgets .footer-widget-1 {
        display: flex;
        flex-wrap: wrap;
        background-color: #fff;
        padding: 40px;
    }
    
    .site-footer .footer-widgets-container .inner-padding {
        padding: 20px;
        margin-bottom: 40px;
        display: flex;
        flex-direction: column;
        flex: 1;
        align-items: center;
    }
    
    .footer-widgets .widget :last-child {
        margin-top: auto;
    }
    
    @media (max-width: 768px) {
        .site-footer .footer-widgets-container .inner-padding {
            flex: 1 100%;
        }
    }
    #1149475
    ch1800

    Awesome!
    You guys rock!

    Thank you very much and sorry for the pain but those clients are a bit complicated…

    #1149501
    David
    Staff
    Customer Support

    Glad we could be of help

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