Remove gap below footer background image on mobile

on small screens, such as my iphone, my footer has a gap at the bottom, below the background image. how can i remove this? it looks great on desktop (no gap below the background image) - only an issue on mobile sized screens.

screenshot of issue: https://imgur.com/a/qi6jE
site: https://tinyurl.com/y7w8972m

thank you

Hello @COK,

Thanks for asking. :slight_smile:

I see that you have added following CSS code and that’s causing spacing in footer. Please adjust the values of padding-bottom: 350px; to 235px and that should fix the problem.

.x-colophon.bottom {
    padding-top: 30px;
    padding-bottom: 350px;
}

Thanks.

This fixes the issue on mobile, but cuts off my image on desktop.

Hello @COK,

Thanks for updating thread. :slight_smile:

You can replace the code with following that will target small screen devices:

@media only screen and (max-width: 600px) {
    .x-colophon.bottom {
    padding-top: 30px;
    padding-bottom: 235px;
}
}  

Let us know how it goes.

Thanks.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.