Question

I have a fixed element that is a small menu with a few links that will follow you on the page.

I am using Squarespace and make a new widget with the links. In the CSS I put this code:

#moduleContent18520661 { 
    position:fixed  !important;
    margin: auto;
    top:700px;
    left:400px;
    cursor:hand;
    background:#efefef;
    border:1px solid #ffcc00;
    width:480px;
    z-index:100;
}

It works perfect only when I align it on my computer. When I look on my laptop it’s too far down.

How can I pin the element to always be on the bottom of the screen no matter what size the screen is?

Answer 1

If you’re using position: fixed you can explicitly position to the bottom, or any other side, of the screen:

#moduleContent18520661 {
    position: fixed;
    bottom: 0; /* the bottom edge of the element will
                  sit against the bottom edge of the window */
    /* other stuff */
}

Just remove the top declaration and replace with the distance you want the bottom edge of the element to to maintain from the bottom edge of the window.

Also, cursor should either be cursor: pointer; or should have cursor: pointer; follow the cursor: hand;, as that’s a purely IE 6 (if I remember correctly) proprietary CSS property value.