Image divider at the bottom of footer

I will have to add here that allthough the Inner Footer Width is set to contained (but footer width = Full) the divider should be full screen wide

Hi there,

I would try footer bar widget area: https://docs.generatepress.com/article/footer-bar-widget-area/

Let me know if this helps.

Hello Leo,
I have tried it (you can see it live) but the footer bar is also contained (no full width) and additionaly I can't "stick" it at the bottom. There is some margin or padding left behind it and I can't state where it comes from.

Thanks
Harris

You should be able to change the container width: https://docs.generatepress.com/article/footer-layout-overview/

This CSS would remove the margin bottom:

.copyright-bar p {
    margin-bottom: 0;
}

Or you can try the after footer content hook: http://demo.generatepress.com/hook-locations/

Hi Leo,

I have already set the margin (and padding) to 0 but there is still a small gap after the image. You can see it live.

I also have already mentioned in my initial post that the footer (the area containing the footer widgets) needs to be contained, but the divider line (hence the footer bar) full width.
Can you please advise me know how can I achieve that by changing the container width as you said?
I mentioned how I now have those settings configured in my initial post.

I also tried using the after footer hook, but I am again getting some margin before and after the image somehow (you can see that live too)
Margin and padding are also set to 0 here and the div height is set exactly as the image height (9px).

Thanks

Can you try changing this CSS you've added:

.after-footer-hook {
    height: 9px;
    border: 0;
    margin: 0;
    padding: 0;
    background: #6290B0;
}

to

.after-footer-hook {
    line-height: 0;
}

Hi

Its better now, but there are still some pixels left after the divider line.

Thanks
Harris

Try adding this to the class:

.after-footer-hook {
    line-height: 0;
    overflow: hidden;
}

Perfect!
Thanks Tom.

You're welcome :)