Часть сайта, невидимая на мобильном телефоне

Question

Я пытаюсь создать свой сайт.

Он отлично работает во всех браузерах, но на моем мобильном телефоне есть только первая часть.

Таким образом, я размещаю части кода, которые я вижу, и части кода, которые я не вижу на своем мобильном телефоне. У кого-нибудь есть идея, почему я не вижу вторую часть?

Я использую Jquery, Фонд унд Skrolr.js

Visible HTML

<div class="row"> 
    <div class="large-12 small-12 medium-12 columns section1" data-0="padding-left: 12%; padding-right: 12%;" data-center="padding-left: 0%; padding-right: 0%;" > 

     <h1>Herzlich Willkommen</h1> 
     <p>Elegantes Webdesign für Unternehmen.</p> 

     <div class="row Collage"> 
      <div class="large-6 medium-6 small-12 leftCollage columns"> 
       <div class="whiteFrame"><h3>Webdesign</h3><p>Elegant und beruhigend sollte eine Website sein. Schnell und simpel. <br>Das richtige Maß. </p></div> 
      </div> 

      <div class="large-6 medium-6 small-12 rightCollage columns"> 
       <div class="whiteFrame"><h3>Programming</h3><p>Jede Idee braucht eine Umsetzung. Ich mache Sie wahr.<br>Jede Idee. </p></div> 
      </div> 

     </div> 
</div> 

Видимый CSS

.Collage { 
    padding-left: 5em; 
    padding-right: 5em; 
    padding-top: 0%; 

} 


@media only screen and (max-width: 64em) { 
    .Collage { 
      padding: 0px; 
     } 
    } 

.leftCollage { 
    background-image: url("../img/coffee.jpg"); 
    background-size: cover; 
    background-position: bottom; 
    background-repeat: no-repeat; 
    text-align: center; 


    border-right: solid white 2px; 
    border-left: solid white 2px; 
    opacity: 0.9; 
    border-bottom: solid white 2px; 
    min-height: 85vh; 
    padding-top: 35%; 

} 

@media only screen and (min-width: 64.063em) { 
    .leftCollage { 
     min-height: 85vh; 
     border-bottom: solid white 0px; 
     padding-top: 20%; 

    } 
} 


.leftCollage:hover { 
    opacity: 1; 
    -webkit-transition: opacity 0.2s ease-in-out; 

} 

.rightCollage { 
    background-image: url("../img/pencil.jpg"); 
    background-size: cover; 
    background-position: bottom; 
    background-repeat: no-repeat; 
    text-align: center; 


    border-right: solid white 2px; 
    border-left: solid white 2px; 
    opacity: 0.9; 
    border-bottom: solid white 2px; 
    min-height: 85vh; 

    padding-top: 35%; 


} 

@media only screen and (min-width: 64.063em) { 
    .rightCollage { 
     min-height: 85vh; 
     border-bottom: solid white 0px; 
     padding-top: 20%; 


    } 
} 

Невидимый HTML

<div class="row threeOneDiv" data-0="padding-left: 0%; padding-right: 0%; " data-center="padding-left: 12%; padding-right: 12%;"> 

    <div class="large-4 medium-12 small-12 columns threeOne" data-0="padding-top: 300px " data-center="padding-top: 0px"> 
     <h3>Webdesign</h3> 
     <i class="fa fa-desktop fa-2x"></i> 
     <p>Konzeption und Umsetzung von Websites für Unternehmen.</p> 
    </div> 

    <div class="large-4 medium-12 small-12 columns threeOne" data-0="padding-top: 300px" data-center="padding-top: 0px"> 
     <h3>SEO</h3> 
     <i class="fa fa-search fa-2x"></i> 
     <p>Planung und Durchführung von SEO-Kampagnen.</p> 
    </div> 

    <div class="large-4 medium-12 small-12 columns threeOne" data-0="padding-top: 300px" data-center="padding-top: 0px"> 
     <h3>Programmierung</h3> 
     <i class="fa fa-code fa-2x"></i> 
     <p>Backend und Schnitstellenentwicklung.</p> 
    </div> 

</div> 

Невидимый CSS

.threeOne { 
    text-align: center; 
    padding-left: 7%; 
    padding-right: 7%; 
    margin-bottom: 0px; 


} 

.threeOne:hover { 
    background-color: #f6f6f6; 

    -webkit-transition: background-color 0.2s ease-in-out; 
    -moz-transition: background-color 0.2s ease-in-out; 
    -ms-transition: background-color 0.2s ease-in-out; 
    -o-transition: background-color 0.2s ease-in-out; 
    transition: background-color 0.2s ease-in-out; 


} 

@media only screen and (max-width: 64em) { 
    .threeOne { 
     margin-bottom: 20px; 
    } 
} 

.threeOneDiv { 
    padding-top: 2em; 
    min-height: 60vh; 
    padding-right: 12%; 
    padding-left: 12%; 
    padding-bottom: 1em; 
} 


@media only screen and (min-width: 1em) and (max-width: 64em) { 
.threeOne { 
    padding: 0em; 

      } 
} 

Answer 1

Таким образом, если кто-то натыкается на тот же вопрос ... я знаю, что ответ довольно прост, но я все еще собираюсь разместить его.

Добавить div с классом skrollr-body.

так:

<div id="skrollr-body"> 

</div> 

Вот это. Спасибо, ребята, за вашу помощь!