Foundation fixed footer howto?

Hi @all,

I created my Page with Foundation from Joe Workman.
How can I adjust the Footer Text, that it is fixed all time at the bottom of my Browserwindow?
And what can I do, that the footer is as wide as my content and not as wide as the Browserwindow?

Thanks for help!


Do you have a URL that we can look at? Also clarify what you want a little further. I am not 100% certain what you are wanting.

Look at my Page

There you can see on Desktop that the Background of the footer is as wide as your window. I want it as wide as my content, which is max 1.000 px. So after the link “Impressum” the Background should end.

Also it is directly below the content. If you switch between the different pages, the Footer is on one page e.g. on y=400px at the next one on y= 518px …
I want the footer all the time at the bottom of my browser and always shown with scrollable content, if it is longer than the visible Window.

Hope you understand what I want.

Found my Problem!

I made the color to the 1 column stack and not to the footer text. Now it works with the width. But there is still the Problem with being fixed at the bottom.

You would like the footer to be fixed to the bottom of the browser? You can use the Target stack to do that.

Bought and fixed it nearly.
Like you can see my page at the right side, when I shrink the browser window, the Padding is missed.
I could set some padding to the 1 column stack, but it should be a responsive padding or something like that.

Or did I make some wrong setting?

On my page I posted on the Startpage some Pics of my settings.

Check the Collapse setting inside the 1 Column stack.

I found an other solution. I created 3 Visible Stacks and set the right padding for each device. Not the perfect solution, but it works. Thanks!