My footer doesn't show all the content when the screen size gets shorter

Question

My footer's last part(the "address" part disappear when the screen's height is shorter than some certain points, around 938), I wonder why?

The HTML looks like this:

      <div className="container-fluid footer">
          <div className="container contact-block">
             <h3> Contact </h3>
             <p>Telephone:  </p>
             <p>Address:  </p>         
          </div>            
      </div>  

So my footer's CSS looks like this:

.footer{
  height: 12%;
  background-color: rgb(54, 58, 57);
  margin-top: 2%;
  color: antiquewhite;
  position: fixed;
  bottom: 0;
  padding-bottom: 8%;
}
...
.contact-block{
  padding: 1%;
  font-family: Georgia, 'Times New Roman', Times, serif;
}

BTW, I use react-bootstrap for styling too

Answer 1

It's because of the height: 12%; after a certain limit the height becomes too small and cannot contain the elements.

I would reconsider using a percentage as the height but if you really want to, then I would at least put something like min-height: 100px; (or whatever min-height works based on your styles), I believe that should solve the issue :)