Footer at the end of the screen

Hello,

I'm trying to put my footer at the end of the screen. When the screen has scrool the footer is not down.

The Css

SyntaxEditor Code Snippet

/* footer **************************/
.Footer {
    background-color: transparent;
    font-size: 12px;
    height: 40px;
    padding: 10px 0px 0px 0px;
    text-align: center;
    top: 100%;
    width: 100%;
    position: static;
    -servicestudio-width: 100%;
}

Where is the problem? Can help

Regards
J.Reigado

Hi Jose Reigado,

Do share the public Live Link for the Same, in order to inspect & suggest you a solution.

Although if possible can u try this one:

/* footer **************************/
.Footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: red;
  color: white;
  text-align: center;
}

thanks,

Assif

Solution

Making it static is the problem. Try  Absolute or Relative

check this link  to try out more https://codepen.io/cbracco/pen/zekgx

Solution

Hi 

I tried both ways but it did not work. The footer when I use scroll it will not go to the bottom of the page.

Hi Jose,


What is your base template? Did you put the footer in the Footer placeholder?


Best regards,

Ricardo

Hi,


Thank you very much. Is solved with the css


SyntaxEditor Code Snippet

/* footer **************************/
.Footer {
    background-color: transparent;
    font-size: 12px;
    height: 40px;
    padding: 10px 0px 0px 0px;
    text-align: center;
    top: 100%;
    width: 100%;
    position: relative;
    -servicestudio-width: 100%;
    
}

Best regards

JReigado

Good to know that it worked.

Can you please confirm if you also have checked what Reigado suggested.

Usually the Default layout from outsystems should be able to handle this right ?


Just need to know if you modified the layout a lot ?

Hi coder kamath,

I just had to change the CSS. I'm not sure but I think the problem was in the position: 

  position: relative;

Thank you all

J.Reigado