Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • August 8, 2016 at 4:45 pm #669915
    LP-Media

    Hello,

    I’m trying to get my socket to stick to the bottom of the page, regardless of content height (footer has been disabled). I have set position: absolute with bottom: 0px, but this makes it stick to the bottom of the viewport, which won’t work if the page is longer.. How do I go about this?

    August 8, 2016 at 6:02 pm #669969
    Guenni007

    try this one here please:

    #socket {
position: fixed;
bottom: 0;
width: 100%;
z-index: 999;
}

    but i think this does not work good on mobile or tabletts

    August 8, 2016 at 7:15 pm #670018
    Jordan

    Hi LP-Media,

    Please try Guenni007 suggestion and let us know if it works for you.

    Thanks Guenni007 for the assistance.

    Best regards,
    Jordan

    August 9, 2016 at 10:47 am #670243
    LP-Media

    Thanks for your replies! This works, except it makes the socket fixed to the bottom of the viewport, instead of the bottom of the content. That’s fine for short pages, except for longer pages the socket appears over the content, instead of at the bottom of it. Could a media query help? (CSS is not my forte :D)

    August 9, 2016 at 11:08 am #670253
    Guenni007

    than i really don’t understand your request.
    if footer is disabled the socket is at the bottom of the content! Isn’t it?

    August 9, 2016 at 11:56 am #670265
    LP-Media

    Yes – if the content is equal to or bigger than the browser window size. If the content is not as high as the browser window it will appear halfway down the screen. So the content should stretch out I guess to force the socket to the bottom of the browser window in such a case.

    August 10, 2016 at 10:11 am #670720
    Guenni007

    i think there is no universal solution on that. For the page / post you need that you can do the rule above with .page-id class

    you can see the result here: Link

    f.e.:

    .page-id-2766 #main {
    min-height: 100vh
}

.page-id-2766 #socket {
position: fixed;
bottom: 0;
width: 100%;
z-index: 999;
}
    August 11, 2016 at 1:08 pm #671289
    LP-Media

    Thank you Guenni007, that did the trick!

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Stick socket to bottom of page’ is closed to new replies.