[Resolved] Module before footer

[Enrico]

Hi there.
Please, I need your help.
I would like to add a full image after the content, just before the footer. The container of the image must be full width.
I mean, like an Hero image but above footer.
I made a Block – Hook module (generate_before_footer) and it seems to work, but there is a empty space between the image and footer.
How can delete/hide that space?
Here is my test page.
Also a screenshot for letting you better understand my poor English 🙂

[David]

Hi there,

try adding this CSS to remove the bottom margin from the Image Block and align it to the bottom:

#page + .wp-block-image {
    margin-bottom: 0;
}
#page + .wp-block-image img {
    vertical-align: bottom;
}

[Enrico]

Thank you very much, it works!
Ciao.
Enrico

[David]

You’re welcome

[Enrico]

I aoplogize to open again this ticket, it was my fault…
Next time I’ll be more care.
I discover just now that your suggestion doesn’t work on mobile.
Do you know how to fix?
Thank you and apologies again.

[Ying]

Hi Enrico,

I didn’t see David’s code been added to your homepage.
In this case, could you try this CSS:

body .wp-block-image {
    margin-bottom: 0;
}

body .wp-block-image img {
    vertical-align: bottom;
}

p.animated.zoomInDown {
    margin-bottom: 0;
}

It should work on mobile too.
Let me know 🙂

[Enrico]

Hi Ying.
Thank you very much, it works perfectly.
I discover that David’s code works well (not on mobile), but later I added the animation and his code didn’t work anymore. Probably you didn’t see the code due to I was working on it 🙂
Anyway, all is right now.
Thanks. Have a good day, ciao.
Enrico

[Ying]

No Problem! Glad to help 🙂

[Author]

Posts