Docs

[hwolfe]

I was using this code for my sticky footer and it was working:

.site > .x-container.max.width.offset {
    min-height: calc(100vh - 397px);
}

until I updated X Theme and then it quit working. I’ve seen other codes on the forum that work but only for full-width layouts. Can you help?

[hwolfe]

This reply has been marked as private.

[Jade]

Hi there,

Please try this code:

@media(min-width: 980px){
  footer.x-colophon.bottom {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 100;
  }
}

Hope this helps.

[Jade]

Hi there,

Please try this code:

@media(min-width: 980px){
  footer.x-colophon.bottom {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 100;
  }
}

Hope this helps.

[hwolfe]

That code is for a full-width layout. How do I do this with a boxed layout?

[Friech]

Hi There,

Please update the given css code to this:

@media(min-width: 980px){
  footer.x-colophon.bottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
    width: 86%;
    max-width: 1000px;
    z-index: 100;
  }
}

Your code above has nothing to do with the footer, so I’m not sure hows that make the footer sticky. Please clarify.

Thanks.

[hwolfe]

Well, that last code sticky-ed the footer but it also left the content hanging! ” )

I’m attaching a screen shot as I am not leaving that code in (client is reviewing the site).

As far as the first code I was using – got it on the forum somewhere but don’t remember. It quit working when I updated X. Doesn’t matter, just need to get this current issue resolved.

Thank you!

[Nico]

Hi There,

Upon testing the code above it is working on your setup. I could not replicate the screenshot you had would you mind sharing us details on how to create a content hanging.

Let us know how it goes.

Thanks.

[hwolfe]

Hmm, I’m not sure I understand what you are asking. I put in the code, it left the content hanging as in the screenshot, then I took the code OUT because the client is reviewing the site.

I just need to have the footer stick to the bottom of the page – in the boxed layout style – on pages that have only a small amount of content.

Thank you!

[Christopher]

Hi there,

Provided code by Friech works fine, please see the attachment.
Not able to see the issue, please clear cache and check again.

Hope it helps.

[Author]

Posts