0

I use the blank theme for my shop. The design looks great except when there is only one item in the cart or if it is empty. In this case the content in is very short, with the footer just coming below it, leaving a lot of space below. This doesn't look good. I have tried various solutions to get the footer down to the bottom of the browser window but none of them didn't work. I guess, this is due to the markup of the blank theme. Is there a way to push the footer down? Any help would be greatly appreciated. Here is a link to my shop: http://he023rz5.edis.at/shop/checkout/cart/

Here are a couple of solutions I tried. I could reproduce them perfectly using the markup they suggest but with the blank theme all of them failed

1

This is not a Magento-specific question - but I can't resist a little Frontend Dev challenge*.

Your theme as-displayed can force the footer-container to the bottom with the following CSS:

.footer-container {
    position: fixed;
    width: 400px; /* required */
    bottom: 0px;
    left: 50%; /* to position the left edge in the center of the page */
    margin-left: -200px; /* to pull it into center */
}

In your particular theme, however, the width and positioning will be tricky for your particular styling (as well as the background color) because you have positioned your entire body as position: relative. It looks as if your footer is helping to maintain the height of your site's main content. When you pull it out it collapses.

To see how it works without your custom positioning here's a Fiddle:

http://jsfiddle.net/U69mz/1/

As an aside, centering position: fixed elements requires a little workaround -- you need to set the position to be left: 50% and then a negative left-margin that is half the width of the element. See my fiddle for more details.


*Disclaimer: I'm not an expert frontend developer. I'm sure there will be other methods that may be more current or correct. Take my advice with a grain of salt!

  • removing the left and changing the margin-left to margin: 0 auto; should work as well and is a bit more flexible. *The same disclaimer is applied to this comment ;) – Sander Mangel Oct 17 '13 at 16:45
  • I tried that. Doesn't work on position: fixed. – philwinkle Oct 17 '13 at 16:54
  • See the fiddle - I'm open to correction. – philwinkle Oct 17 '13 at 16:55
  • jsfiddle.net/U69mz/3 like this it should work. At least in Chrome and FF – Sander Mangel Oct 17 '13 at 17:48
  • My centering technique was taken from Chris Coyier at CSSTricks. I blame him. Also, removing your margin doesnt unset the center for me. You have some magic in there somewhere... – philwinkle Oct 17 '13 at 19:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.