Sticky Footer issue [repost]

Firstly, thanks for all the great help I’ve gotten here in the past.
I’m having a weird issue with a sticky footer on a site. The standard site is fine, but on mobile there’s a load of blank space being added before the footer. Here’s a code snippet from the page:

    <div data-sticky-container>
    	<footer data-sticky data-stick-to="bottom" >
    		<div class="grid-x" >
        		<div class="hide-for-small-only medium-4 cell">
          			<ul class="menu align-left">
            			<li>Stuff</li>
          			</ul>
        		</div>
    	   		<div class="hide-for-small-only medium-4 cell">
          			<ul class="menu align-center">
            			<li class="menu-text">Stuff</li>
          			</ul>
        		</div>
        		<div class="hide-for-small-only medium-4 cell">
          			<ul class="menu align-right">
            			<li class="menu-text">Stuff</li>
          			</ul>
        		</div>
    			<div class="hide-for-medium small-12 cell">
    				<p class="text-center">Smaller Stuff</p>
    			</div>
    		</div>
    	</footer>
    </div>

If I render it with a mobile emulator in Chrome and look at the CSS, the footer element has an element.style with “top” set to 5179px - which is the issue.

Any thought? Did I make a mistake with the HTML?
TIA for any assistance…

I can’t figure out how to use markdown to make the code show, here’s a graphic instead…

I have updated your post. You neeed 3 or 4 backticks (fenced code block).

Can you provide a codepen which reproduces this issue with Foundation Sites 6.6.3?
Also we miss some information like the exact Foundation Sites version that you use.

Thank you for fixing that, got the wrong mark. Yes, it’s 6.6.3 from the CDN. Err, don’t know how to codepen, but the real site is rwcc.com any page from either a mobile or emulator…
I’ll see if I can figure out the codepen thing…

You can use and fork this one:

I tried :slight_smile:
Does this work?

And this doesn’t seem to display the same problem as the site, although it’s the same code [sigh]

Try to wrap the initialization code in the correct jQuery.ready block:

$(function() {
  $(document).foundation();
});

https://api.jquery.com/ready/

Alternatively try some pure CSS approach like here:

1 Like