Нижний колонтитул не отображается полностью в режиме мобильного просмотра

#html #css #flexbox

Вопрос:

действительно не знаю, в чем проблема, поэтому я рассчитываю на вашу поддержку в этом вопросе. Поэтому, когда я пытаюсь просмотреть свой веб-сайт на любом мобильном устройстве со 100% — ным увеличением, нижний колонтитул вообще не отображается, но если вы увеличите масштаб на 50%, нижний колонтитул будет отображаться. Ниже вы можете увидеть несколько скриншотов.

и это мой код:

 <footer>
    <div class="container fter">
        <div class="footerLogo">
            <img src="images/logo.png" alt="logo">
        </div>
        <div class="socialsFooter">
            <ul class="socialsList">
                <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
                <li><a href="#"><i class="fa fa-dribbble"></i></a></li>
                <li><a href="#"><i class="fa fa-pinterest-p"></i></a></li>
                <li><a href="#"><i class="fa fa-instagram"></i></a></li>
            </ul>
        </div>
        <div class="fterCredits">
            <h4>© 2016 <a href="#"> MULITIX THEME</a> BY THEMEFORCES. ALL RIGHTS RESERVED.</h4>
        </div>
    </div>
</footer>

 footer {
  padding: 140px 0;
  background-color: #ffffff;
  box-shadow: 0px -5px 5px -5px rgba(34, 60, 80, 0.6);
}

.fter {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

.footerLogo {
  display: flex;
  justify-content: center;
  margin-bottom: 44px;
}

.socialsFooter {
  border-top: 1px solid #e1e1e1;
  border-bottom: 1px solid #e1e1e1;
  padding: 23px 0;
  opacity: 0.8;
  margin-bottom: 44px;
}

ul.socialsList {
  display: flex;
  justify-content: space-between;
  list-style-type: none;
  flex-wrap: wrap;
  margin: auto;
  max-width: 440px;
}

ul.socialsList a {
  color: #808080;
  border: 1px solid transparent;
  border-radius: 50%;
  height: 27px;
  width: 27px;
  line-height: 27px;
  transition: .3s;
  display: inline-block;
  text-align: center;
}

ul.socialsList a:hover {
  background-color: #555555;
  color: #ffffff;
}

.fterCredits {
  display: flex;
  justify-content: center;
}

.fterCredits h4 {
  color: #808080;
  font-family: "Roboto-Light", sans-serif;
}

.fterCredits a {
  color: #000000;
  text-decoration: none;
  font-family: "Roboto-Light", sans-serif;
}

вы можете увидеть полную проблему здесь:
https://rissutei4.github.io/LianCreativeAgency/

1. итак, как бы он поместил все содержимое по высоте экрана, если содержимое не помещается по высоте экрана?

2. Какого поведения вы ожидаете?

3. @GalAbra Я хочу, чтобы нижний колонтитул полностью отображался на 100%, как на первом скриншоте

4. @GarrGodfrey что ты имеешь в виду?

5. на самом деле ваша проблема в том, что эмулятор iPad не помещается в окне вашего браузера.

Ответ №1:

Ваш сайт отлично реагирует, проблема в инструментах разработки Chrome.

Вы можете включить опцию линейки здесь:

После включения этой функции вы можете увидеть, что при размере 50% горизонтальное разрешение отображается меньше 1024, что означает, что chrome вырезает часть экрана.

При размере 50% вы можете видеть, что будет показан весь экран: