Scrollen zu lange in Responsive Design, CSS oder Paralax Isue?

Question

Ich kann mein Problem in der Vorlage für das responsive Design nicht finden. Auf dem PC-Bildschirm ist es perfekt, aber auf jedem anderen Medienbildschirm müssen Sie für lange Zeit nach unten scrollen. Die aktuelle Webseite ist: www.twins-pisces.be Kannst du mein Problem dabei finden? Vielen Dank.

Das ist mein CSS:

/* Medium */

@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; 
     } 

} 

/* Small */

#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; 
     } 

Liste Artikel

Html-Code:

 <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> 

Es gibt auch eine parralax Funktion:

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

Answer 1

Das Problem innerhalb der Klasse .style1 oder .bottom sein könnte, weil es in den ersten Abschnitt, wo der Inhalt beginnt kann geh nicht hoch. Vielleicht könnten Sie versuchen, diese Klassen für ein besseres Responsive Webdesign zu ändern.