[Resolved] Image divider at the bottom of footer

[Harris]

Hello,
I was wondering how can I add a divider (image) at the bottom of the footer (below all widgets).
Should I use the footer copyright bar or can it be achieved elseway?

The divider will be the last thing (last pixels) of footer and of whole site

Thanks

[Harris]

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

[Leo]

Hi there,

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

Let me know if this helps.

[Harris]

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

[Leo]

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/

[Harris]

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

[Leo]

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;
}

[Harris]

Hi

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

Thanks
Harris

[Tom]

Try adding this to the class:

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

[Harris]

Perfect!
Thanks Tom.

[Tom]

You’re welcome 🙂

[Author]

Posts