Responsive footer jumps up against content

I wonder if what you want is a sticky footer? You can read a little about the concept here:

https://css-tricks.com/snippets/css/sticky-footer/

For the background image issue, playing around with background-size properties might solve the problem:

https://www.w3schools.com/cssref/css3_pr_background-size.asp

Hi, thanks a lot for your reply.
The problem with the footer is, I’ve read almost every article that explains how to use a sticky footer, and these methods seem to apply to the base theme layout where the footer works accordingly. But there’s something within the responsive part that ignores this and I can’t seem to figure out what exactly creates this behavior or which code I need to change. All of the sticky footer tutorials seem to use very basic templates to work from. They are also meant for fixed height footers which doesn’t apply to this one since the content can stack.

With the background I’ve tried a couple css properties including the one you linked, but frustratingly enough the changes either don’t seem to work or the whole background image simply vanishes. I must be doing something wrong.

Is this what you did to try and get the background image to re-size?

.art-footer {
    background-size: 100% 100%;
}

I’m not quite clear on how you want the footer to display on mobile devices. Do you just want to add some padding between the footer and the main content?

Yes that’s one of the code I tried. As you can see right now on the website, I’ve added this bit below the .art-footer bracket but there doesn’t seem any change.

For the sticky footer, as you can see, as soon as the browser window goes smaller than 1000px width (where the responsive functionality kicks in), the footer jumps up against the content. This is most noticeable on the welcome page. I need this footer to remain down in tablet and smartphone mode like it does when the browser window is maximized.
Right now there’s a huge gap underneath the footer in tablet and phone view.

Ah the code now seems to work. Apparently it had to be placed below all items within the .art-footer bracket. I first had placed right below

background: url(‘images/footer.png’) scroll;

Now that it’s at the bottom, the background image stretches.
Thanks a lot!

Hey, that’s terrific, I’m glad you got it wrangled!

There’s still the issue with the footer jumping up unfortunately.
My guess is that this issue is related to the small resolutions on smartphones, where the browser height can’t extend further than where the footer is located. Because my monitor allows further stretching of the browser window, I guess this allows the gap below the footer to exist since it simply doesn’t account for tall resolutions.
Still though, it’s a noticeable issue on PC that needs fixing.

I’m not sure I’m understanding the issue, so I apologize in advance if what I’m mentioning doesn’t help…

What I’m seeing on my iPhone 5 is that the footer is stuck to the bottom when I initially load the home page, but when I scroll to the end, the footer moves up above the bottom of the screen. That seems to be the default rubber band effect with iOS scrolling. I don’t have an Android device, so I’m stuck with using Chrome to simulate the experience. I can’t be sure that I’m seeing what you’re experiencing.

If the rubber band effect is the behavior you don’t want, I wonder if you could try tweaking the overflow properties of your top-level element? Or maybe there’s a way to disable the rubber band effect. Maybe adding some padding/margin above your footer would also help?

Could be that the website shows fine on actual phones since the page height probably exceeds the phone’s screen height.
However, when you view the website’s responsive effect in a browser on a PC from which it’s monitor height resolution exceeds the site’s content height, you’ll see that the footer gravitates towards the content field, causing a huge gap below the footer.

Here you can see what I mean:
https://i.imgur.com/YoiTx26.png

What’s marked with the red cross is the gap I mean.
Only in the maximized version of the site on a PC the footer sticks to the bottom.

Thanks so much for the screenshot, I see what you mean. As long as the page scrolls, the footer sticks to the bottom. Any time the entire page fits in the viewport, the footer is right below your main content. If you don’t want to have to completely re-write the theme code, I wonder if adding a min-height (or adjusting the min-height) of the main content for the various @media queries in your responsive stylesheet would take care of the issue, at least in most cases?

https://demo.saltwater.nl/wp-content/themes/saltwater/style.responsive.css

Forgive me for asking, but would you know how to add this code to the @media queries? My experience is a bit limited when it comes to these scripts. I can’t seem to find how to implement this min height in there.

The coding is pretty much the same as in your regular stylesheet, it just gets nested within an @media rule. Here’s an example:

@media all and (max-width: XXXpx) {
    .art-layout-wrapper {
        min-height: YYYpx;
    }
}

The class I used is just an example, you may want to use another one for your solution. There may not be an @media rule for the viewport size where you’re seeing the issue of the footer not sticking to the bottom. In that case, you may want to create a new one. You can have more than one rule, for example, a min. and a max. width. Have a look here for usage rules:

https://www.w3schools.com/cssref/css3_pr_mediaquery.asp