1

I am trying to create a sticky footer on a custom WordPress theme. I have looked at many online tutorials with no success.

It does not seem to be working responsively, it sticks, but as soon as I re-size the browser the height increases.

The footer needs to be responsive but also stick to the bottom of the page regardless of content size.

The website in question is:

http://shopexample.co.uk/

Would really appreciate some help on this one.

Thanks :)

dave
  • 2,291
  • 3
  • 19
  • 25
Alicia C
  • 15
  • 4
  • http://jsfiddle.net/4Yt2G/1/ - jsfiddle for the above. – Alicia C Oct 22 '13 at 11:34
  • I've looked at your fiddle and why are you keeping .footerwrap inside .headerwrap? As I know sticky footer is usually placed relatively to 100% height node. – Alexandra Oct 22 '13 at 11:52
  • [Have a look at this example](http://stackoverflow.com/a/20114486/618649). Use media queries to set the height of your footer for each screen resolution you are targeting with your responsive design. You'll have breaks (media queries) at whatever screen widths make sense, and just set the fixed size of your footer to match. Also, you can use media queries to make it a sticky footer only until the screen gets too short for that to make sense, then make it a floating footer. – Craig Tullis Dec 01 '13 at 21:33

2 Answers2

1

The problem is not your footer expanding, it is related to image dimensions and body.

When you resize your browser (smaller), the background-images' size adapts to the viewport's width, not its height. That means that at a certain point, the image doesn't vertically fit the viewport anymore.

Then what is visible is the background-color of your body.custom-background, which is, coincidentally, exactly the same color as your footer's background (background-color: #cccccc;).

You can change the background-color of your body to distinguish it from the footer. You cannot resize the image to full-browser width AND height simultaneously without distortions.

Sticky footers: I noticed your footer & its wrapper are not positioned fixed or relative, which is the common approach for sticky footers. Then position it with the bottom property.

Fixed position:

  • will stick to bottom
  • will not scroll
  • will always be visible

Relative position:

  • will stick to bottom
  • will scroll
  • will only be visible on reaching page bottom
webketje
  • 10,376
  • 3
  • 25
  • 54
0

Check the working copy of your fiddle here http://jsfiddle.net/Mohinder/Yj6gu/

Problem was with headerwrap which was not closed where it should be and with body height.

Mohinder Singh
  • 1,848
  • 1
  • 13
  • 14