Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #292934

    Hi
    How do you fix at bottom windows the socket and footer element? I try this, but it’s not working :

    #footer {position:fixed;
        left:0px;
        bottom:50px;
        min-height:130px;
        width:100%;
    padding: 0px 0 0px 0;
    margin-bottom: -15px;}
    
    #socket {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 999;
    }
    

    Thanks

    #292996

    One way for solve, i add this :

    
    #footer, #socket {
    -webkit-transform: translateZ(0);
    }
    

    this tips solve a display problem (see my last topic solved ;) ) but now the socket and footer are “hide” when the content has a little height and come on the content when he has a big height.

    thanks for help

    #293222

    Hi!

    Thank you for visiting the support forum.

    Try adding a bottom padding on the main content:

    div#main {
    padding-bottom: 200px;
    }

    Regards,
    Ismael

    #293791
    This reply has been marked as private.
    #293952

    Hey!

    Please edit the code Ismael posted and add media queries as following

    @media only screen and (min-width: 990px) {
    div#main {
    padding-bottom: 200px;
    }}

    Regards,
    Yigit

    • This reply was modified 5 years, 4 months ago by  Yigit.
    #294338

    Yigit thanks for your help but its’nt work better than Ismael solution!
    ( and you missing 900px ;) )

    See the code now after your help :

    #footer, #socket {
    -webkit-transform: translateZ(0);
    }
    
    #footer {
        position:fixed;
        left:0px;
        bottom:50px;
        min-height:130px;
        width:100%;
        padding: 0px;
        margin-bottom: -15px;
    }
    
    #socket {
         position: fixed;
         bottom: 0;
         width: 100%;
         z-index: 999;
    }
    
    @media only screen and (min-width: 990px) {
    div#main {
    padding-bottom: 200px;
    }}
    

    Any idea? :)

    thanks

    #294727

    Hey!

    I think it would be more convenient and better to disable the fixed position on smaller screens:

    @media only screen and (max-width: 767px) {
    #footer, #socket{ position: relative !important; }
    }

    Cheers!
    Josue

    #294968
    This reply has been marked as private.
    #295037

    Hi!

    The fixed socket will not work. Please set the position back to “relative” if you don’t want to hide the content. If you want to set a min height for the content container div try this code:

    
    #top .main_color.container_wrap.fullsize{
    min-height: 300px;
    }
    

    and replace 300 with any other positive px or % value if necessary.

    Cheers!
    Peter

    #295361

    Ok it’s a Mc Gyver solution! ^^ (and if you’re many container this solution is broken)
    I go to the Enflod’s wich list for a sticky footer ;)

    Thanks for all your helps, you can close this topic.
    Sorry for the time loose :/

    Marc

Viewing 10 posts - 1 through 10 (of 10 total)

The topic ‘Fixed Socket et Footer ("sticky" footer)’ is closed to new replies.