cssmobile-safaristicky-footer

How to create a sticky footer that works with mobile and desktop?

I have looked through many different posts and there does not seem to be a good, working solution. I would like my footer to be at the bottom of the page whether the website is being viewed on a monitor from a desktop or an iPhone in Safari.

Current css code:

body {
    margin-bottom: 60px;
}
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    line-height: 60px; 
    background-color: #f5f5f5;
}

HTML code:

<footer class="footer">
  <div class="container">
    <span class="text-muted">text</span>
  </div>
</footer>

The footer is currently at the bottom of the page on desktop and in the middle of the page on mobile Safari.

Solution

  • The reason why is because it's positioning it absolute based on the height of the window, not your content.

    What you need to do is add a media query for mobile. Something like:

    @media screen and (max-width: 1024px){
  body{
   margin-bottom: 0;
  }
  .footer {
    position: relative;
  }
}