Почему нижний колонтитул исчезает под краем экрана на небольших устройствах?

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>