как исправить страницу с половиной высоты в мобильном представлении?

Question

Я только что разработал простую страницу, чтобы перенаправить пользователя Instagram на URL.Я сталкиваюсь с проблемой, что страница отображается только наполовину на экране мобильного телефона.Но, получая правильное отображение на рабочем столе.Я использовал bootstrap.

ссылка на страницу

Я не уверен, почему он не работает на рабочем столе.Когда я закончил и загрузил страницу, показ проблемы -

   html,body {
      height:100%;
      min-height:100%;
      max-height:100%;
    }

    body
    {
        background-image: url(https://source.unsplash.com/800x600/?Dark
    );
       background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      backgroud-opacity: 0.7;
      height: 100%;
      opacity: 0.7;
      filter: alpha(opacity=70); /* For IE8 and earlier */
    }