Search code examples
htmlcssmaterial-designfootermaterialize

Shift text above inside the footer in materialize

I have a materialize footer whose height I have set to 35px. But the problem is text inside the footer disappears. How do I shift it up as it goes off the screen whenever I decrease the size of footer

  <footer style="position:fixed;bottom:0;left:0;width:100%;" class = "page-footer">

 <div class = "footer-copyright">

    <div class = "container">
       © 2016 Copyright Information
       <a class = "grey-text text-lighten-4 right" href = "#!">Designed & Developed by XYZ</a>
    </div>
 </div>

Which gives me

enter image description here

Now when I applied CSS to reduce the size of footer and move the text inside the container up I am getting.

    footer {
       height: 35px;
    }
    footer .container {
       margin-bottom : 50px;
    }

enter image description here

The text has been disppeared and when I tried moving that text container up its not working.

How can I solve this and where am I going wrong.

Note : I have tried all answers that I was getting as suggestion but none of them worked for me.

Solution 
  • footer .container {
  margin-bottom: 50px;
}

    This doesn't work because .container it's inside footer with a fixed height.

    For avoid the text disappear you can try add a line-height to footer with the same value:

    footer {
  height: 35px;
  line-height: 35px;
}

    And if you wanna include that some extra space at bottom you can add a padding:

    footer {
  height: 35px;
  line-height: 35px;
  padding-bottom: 50px;
}

    ;)