为什么在较小的设备上，页脚在屏幕边缘下方消失？

Question

我尝试用固定顶部和固定底部修复导航栏和页脚。在较小的设备上，我的页脚消失在屏幕边缘下方。我不知道为什么。

我希望页脚保持不变，以便在较小的屏幕上响应并且不要像现在这样在较小的屏幕上消失在屏幕边缘下方。

body {
  font-family: 'Roboto', sans-serif;
  color: #F5F5F5;
  padding-top: 60px;
  /* padding-bottom: 75px; not sure I need this? */
  /* I want the background-img to cover the screen on different sizes and to not scroll with the pages content*/
  background: url("../images/file6-2.jpeg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  /* Im using flexbox here to easily align items and justify content properties  */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}


/*-----------------------------------Footer */

footer {
  background-color: #404040;
  color: #fafafa;
  min-height: 80px;
  margin: 0;
  position: fixed;
  height: 80px;
  right: 0;
  bottom: 0;
  left: 0;
}

.resume-pdf i {
  font-size: 24px;
  color: #F5F5F5;
  text-align: center;
  padding-top: 5px;
  padding-left: 5px;
  transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  -webkit-transition: all 0.35s ease-in-out;
  -o-transition: all 0.35s ease-in-out;
}

.resume-pdf i:hover {
  color: #000;
}

.social-links {
  padding-bottom: 15px;
}

.social-links li a i {
  width: 32px;
  height: 32px;
  padding: 12px 0;
  border-radius: 50%;
  font-size: 13px;
  line-height: 7px;
  text-align: center;
  color: #F5F5F5;
  background: #8f8f8f;
  transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  -webkit-transition: all 0.35s ease-in-out;
  -o-transition: all 0.35s ease-in-out;
}

.social-links li a i:hover {
  background: #000;
}

#footer-details {
  padding: 15px;
}

.list-inline {
  margin-bottom: 0px;
}

<footer class="container-fluid fixed-bottom"></footer>