レスポンシブデザインでは、スクロールダウンが長すぎます。

Question

レスポンシブデザインのテンプレートで問題が見つかりません。 PC画面では完璧ですが、他のメディア画面では長い間スクロールダウンする必要があります。現在のウェブサイトは：www.twins-pisces.be これについて私の問題を見つけることができますか？どうもありがとうございました。

これは私のCSSです：

/*ミディアム*/

@media screen and (max-width: 980px) { 

    /* Basic */ 

     body, input, select, textarea { 
      font-size: 12pt; 
     } 

    /* Spotlight */ 

     .spotlight { 
      background-attachment: scroll; 
      height: auto; 
     } 

      .spotlight .image.main { 
       display: block; 
       margin: 0; 
       max-height: 40vh; 
       overflow: hidden; 
      } 

      .spotlight .content { 
       background-color: #1c1d26; 
       border-width: 0 !important; 
       border-top-width: 0.35em !important; 
       bottom: auto !important; 
       left: auto !important; 
       padding: 4.5em 2.5em 2.5em 2.5em !important; 
       position: relative; 
       right: auto !important; 
       text-align: center; 
       top: auto !important; 
       width: 100% !important; 
      } 

      .spotlight .goto-next { 
       display: none; 
      } 

    /* Wrapper */ 

     .wrapper { 
      padding: 4.5em 2.5em 2.5em 2.5em; 
     } 

    /* Banner */ 

     #banner { 
      background-attachment: fixed; 
     } 

      #banner .goto-next { 
       height: 7em; 
      } 

      #banner .content { 
       padding: 0; 
       text-align: center; 
      } 

       #banner .content header { 
        display: block; 
        margin: 0 0 2em 0; 
        text-align: center; 
       } 

       #banner .content .image { 
        margin: 0; 
       } 

    /* Footer */ 

     #footer { 
      padding: 4.5em 0; 
     } 

} 

/*小*/

#navPanel, #titleBar { 
    display: none; 
} 

@media screen and (max-width: 736px) { 

    /* Basic */ 

     html, body { 
      overflow-x: hidden; 
     } 

     body, input, select, textarea { 
      font-size: 12pt; 
     } 

     h2 { 
      font-size: 1.5em; 
     } 

     h3 { 
      font-size: 1.2em; 
     } 

     h4 { 
      font-size: 1em; 
     } 

    /* Section/Article */ 

     header p br { 
      display: none; 
     } 

     header h2 + p { 
      font-size: 1em; 
     } 

     header h3 + p { 
      font-size: 1em; 
     } 

     header h4 + p, 
     header h5 + p, 
     header h6 + p { 
      font-size: 0.9em; 
     } 

     header.major { 
      margin: 0 0 2em 0; 
     } 

    /* Goto Next */ 

     .goto-next:before { 
      height: 0.8em; 
      margin: -0.4em 0 0 -0.6em; 
      width: 1.2em; 
     } 

    /* Spotlight */ 

     .spotlight { 
      box-shadow: 0 0.125em 0.5em 0 rgba(0, 0, 0, 0.25); 
     } 

      .spotlight .image.main { 
       max-height: 60vh; 
      } 

      .spotlight .content { 
       border-top-width: 0.2em !important; 
       padding: 3.25em 1.5em 1.25em 1.5em !important; 
      } 

    /* Wrapper */ 

     .wrapper { 
      padding: 3.25em 1.5em 1.25em 1.5em; 
     } 

    /* Header */ 

     #header { 
      display: none; 
     } 

    /* Banner */ 

     #banner { 
      box-shadow: 0 0.125em 0.5em 0 rgba(0, 0, 0, 0.25); 
      min-height: calc(100vh - 44px); 
     } 

      #banner:before { 
       height: calc(100vh - 44px); 
      } 

      #banner .content { 
       padding: 0em; 
      } 

       #banner .content header h2 { 
        font-size: 1.5em; 
       } 

       #banner .content .image { 
        height: 1em; 
        width: 1em; 
       } 

    /* Off-Canvas Navigation */ 

     #page-wrapper { 
      -moz-backface-visibility: hidden; 
      -webkit-backface-visibility: hidden; 
      -ms-backface-visibility: hidden; 
      backface-visibility: hidden; 
      -moz-transition: -moz-transform 0.5s ease; 
      -webkit-transition: -webkit-transform 0.5s ease; 
      -ms-transition: -ms-transform 0.5s ease; 
      transition: transform 0.5s ease; 
      padding-bottom: 1px; 
      padding-top: 44px !important; 
     } 

     #titleBar { 
      -moz-backface-visibility: hidden; 
      -webkit-backface-visibility: hidden; 
      -ms-backface-visibility: hidden; 
      backface-visibility: hidden; 
      -moz-transition: -moz-transform 0.5s ease; 
      -webkit-transition: -webkit-transform 0.5s ease; 
      -ms-transition: -ms-transform 0.5s ease; 
      transition: transform 0.5s ease; 
      display: block; 
      height: 44px; 
      left: 0; 
      position: fixed; 
      top: 0; 
      width: 100%; 
      z-index: 10001; 
      background: #272833; 
      box-shadow: 0 0.125em 0.125em 0 rgba(0, 0, 0, 0.125); 
     } 

      #titleBar .title { 
       color: #ffffff; 
       display: block; 
       font-weight: 300; 
       height: 44px; 
       line-height: 44px; 
       text-align: center; 
      } 

       #titleBar .title a { 
        color: inherit; 
        border: 0; 
       } 

      #titleBar .toggle { 
       text-decoration: none; 
       height: 60px; 
       left: 0; 
       position: absolute; 
       top: 0; 
       width: 90px; 
       outline: 0; 
       border: 0; 
      } 

       #titleBar .toggle:before { 
        -moz-osx-font-smoothing: grayscale; 
        -webkit-font-smoothing: antialiased; 
        font-family: FontAwesome; 
        font-style: normal; 
        font-weight: normal; 
        text-transform: none !important; 
       } 

       #titleBar .toggle:before { 
        background: #e44c65; 
        color: rgba(255, 255, 255, 0.5); 
        content: '\f0c9'; 
        display: block; 
        font-size: 18px; 
        height: 44px; 
        left: 0; 
        line-height: 44px; 
        position: absolute; 
        text-align: center; 
        top: 0; 
        width: 54px; 
       } 

     #navPanel { 
      -moz-backface-visibility: hidden; 
      -webkit-backface-visibility: hidden; 
      -ms-backface-visibility: hidden; 
      backface-visibility: hidden; 
      -moz-transform: translateX(-275px); 
      -webkit-transform: translateX(-275px); 
      -ms-transform: translateX(-275px); 
      transform: translateX(-275px); 
      -moz-transition: -moz-transform 0.5s ease; 
      -webkit-transition: -webkit-transform 0.5s ease; 
      -ms-transition: -ms-transform 0.5s ease; 
      transition: transform 0.5s ease; 
      display: block; 
      height: 100%; 
      left: 0; 
      overflow-y: auto; 
      position: fixed; 
      top: 0; 
      width: 275px; 
      z-index: 10002; 
      background: #181920; 
      padding: 0.75em 1.25em; 
     } 

      #navPanel .link { 
       border: 0; 
       border-top: solid 1px rgba(255, 255, 255, 0.05); 
       color: rgba(255, 255, 255, 0.75); 
       display: block; 
       height: 3em; 
       line-height: 3em; 
       text-decoration: none; 
      } 

       #navPanel .link:hover { 
        color: inherit !important; 
       } 

       #navPanel .link:first-child { 
        border-top: 0; 
       } 

       #navPanel .link.depth-0 { 
        color: #ffffff; 
        font-weight: 300; 
       } 

       #navPanel .link .indent-1 { 
        display: inline-block; 
        width: 1.25em; 
       } 

       #navPanel .link .indent-2 { 
        display: inline-block; 
        width: 2.5em; 
       } 

       #navPanel .link .indent-3 { 
        display: inline-block; 
        width: 3.75em; 
       } 

       #navPanel .link .indent-4 { 
        display: inline-block; 
        width: 5em; 
       } 

       #navPanel .link .indent-5 { 
        display: inline-block; 
        width: 6.25em; 
       } 

     body.navPanel-visible #page-wrapper { 
      -moz-transform: translateX(275px); 
      -webkit-transform: translateX(275px); 
      -ms-transform: translateX(275px); 
      transform: translateX(275px); 
     } 

     body.navPanel-visible #titleBar { 
      -moz-transform: translateX(275px); 
      -webkit-transform: translateX(275px); 
      -ms-transform: translateX(275px); 
      transform: translateX(275px); 
     } 

     body.navPanel-visible #navPanel { 
      -moz-transform: translateX(0); 
      -webkit-transform: translateX(0); 
      -ms-transform: translateX(0); 
      transform: translateX(0); 
     } 

    /* Footer */ 

     #footer { 
      padding: 3.25em 1.5em; 
     } 

} 

/* XSMALL */

@media screen and (max-width: 480px) { 

    /* Basic */ 

     html, body { 
      min-width: 320px; 
     } 

     body, input, select, textarea { 
      font-size: 12pt; 
     } 

    /* List */ 

     ul.actions { 
      margin: 0 0 2em 0; 
     } 

      ul.actions li { 
       display: block; 
       padding: 1em 0 0 0; 
       text-align: center; 
       width: 100%; 
      } 

       ul.actions li:first-child { 
        padding-top: 0; 
       } 

       ul.actions li > * { 
        margin: 0 !important; 
        width: 100%; 
       } 

      ul.actions.small li { 
       padding: 0.5em 0 0 0; 
      } 

       ul.actions.small li:first-child { 
        padding-top: 0; 
       } 

    /* Button */ 

     input[type="submit"], 
     input[type="reset"], 
     input[type="button"], 
     .button { 
      padding: 0; 
     } 

    /* Spotlight */ 

     .spotlight .image.main { 
      max-height: 50vh; 
     } 

     .spotlight .content { 
      padding: 3em 1.25em 1em 1.25em !important; 
     } 

    /* Wrapper */ 

     .wrapper { 
      padding: 3em 1.25em 1em 1.25em; 
     } 

    /* Banner */ 

     #banner .content { 
       padding: 3em 1.5625em 5.25em 1.5625em; 
     } 

一覧アイテム

HTMLコード：それは にどこコンテンツが可能な第1のセクションを開始するため、問題が内部クラス.style1又は.bottomかもしれ

var $banner = $('#banner'); 
$banner._parallax(); 

Answer 1

：

 <section id="banner"> 
     <div class="content"> 
      <header> 
       <h2>TWINS & PISCES FASHION</h2> 
       <p>Fashion homeparty's en B2B evenement. </p><p>Verkoop van Italiaanse damestextiel en mode-accessoires. </p> 
      </header> 
      <span class="image"><img src="images/pic01.jpg" alt="" /> </span> 
     </div> 
     <a href="#one" class="goto-next scrolly">Volgende</a> 
    </section> 

parralax機能もあり上がらない。たぶんあなたはより良いレスポンシブなウェブデザインのためにそのクラスを修正しようとする可能性があります。