Jump to content
y h


Recommended Posts

Hi, I have a problem with my footer; Before I applied the new theme to my application, the footer was in the bottom of the page normally but when I changed the theme and I did some modifications but not for the footer, it came in the middle of the page with the main content (not in the middle but always under the main content of the page)

If I add position: absolute; to the footer it comes over the main content;

This is my footer code:

.footer.style2 {    padding: 74px 0 38px;    background: #000;}.footer.style2 .widget-container .widget-title{    font-size:18px;    font-style: normal;    color: #fff;    text-transform: uppercase;    margin-top: 10px;    margin-bottom:16px;}.footer.style2 .widget-container li{margin-bottom: 10px;}.footer.style2 .widget-container li span, .footer .widget-container li a span{color:#797e80;}.footer.style2 .widget-container li a:hover span{color:#e87352;}.footer .map{    width: 194px;    height: 194px;    -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);    border-radius: 50%;}.footer .map .gmnoprint{display: none;}

To solve the problem I added :"margin-top: 900px;" to the .footer.style2 but actually it's not practical because when I have a page longer I have to increase the margin-top.

I don't know what I did wrong so please if anyone had faced this issue before or have an idea how to solve it tell me.

Thanks in advance:)


Share this post

Link to post
Share on other sites

i am just a noob, but should you footer not be inside a div?


i mean a missing div, also messed up my page ones

Edited by thxman

Share this post

Link to post
Share on other sites

Usually the sticky footer is placed below a outer container whose height is set to fill the entire browser window OR extend with content if it extend below browser window viewport area, with


body,html {height: 100%;}

#outer_container {min-height: 100%}


The footer then uses a minus top margin that is the same height of footer, this causes it to overlap the bottom edge of outer_container to bring it into view, you then add padding to content container so that the content does go under the footer.


It sounds like body, html or #outer_container have been amended from styling above, which causes it to revert to normal layout where the content determines height outer_container.

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...