Tagged: , , , ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • July 18, 2014 at 12:59 pm #292934
    Octopus4444

    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

    July 18, 2014 at 3:30 pm #292996
    Octopus4444

    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

    July 19, 2014 at 4:02 am #293222
    Ismael

    Hi!

    Thank you for visiting the support forum.

    Try adding a bottom padding on the main content:

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

    Regards,
    Ismael

    July 21, 2014 at 11:06 am #293791
    Octopus4444
    This reply has been marked as private.
    July 21, 2014 at 6:27 pm #293952
    Yigit

    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 10 years, 4 months ago by Yigit.
    July 22, 2014 at 2:14 pm #294338
    Octopus4444

    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

    July 23, 2014 at 2:24 am #294727
    Josue

    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

    July 23, 2014 at 3:27 pm #294968
    Octopus4444
    This reply has been marked as private.
    July 23, 2014 at 5:13 pm #295037
    Dude

    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

    July 24, 2014 at 11:39 am #295361
    Octopus4444

    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

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Fixed Socket et Footer ("sticky" footer)’ is closed to new replies.