Stop Generating Unwanted Scrolling in CSS

Question

I got little code from a website its about animate.css. The problem I am facing is that when page load it generate too many scroll. If I use bounceInRight or bounceInLeft if generate left or right scroll and when I use bounceInUp or bounceInDown it generate vertical scroll and when I minimize screen and then maximize that scroll automatically getting removed. Here is my CSS and HTML

<div id="logo">
        <span id="a">
            <span class="dd animated bounceInUp">A</span>
        </span>

        <span id="leading">
            <span class="da animated bounceInUp">Leading</span>
        </span>


        <div>
        <span id="mep">
            <span class="zz animated bounceInUp">MEP</span>
        </span>

        <span id="integrated">
            <span class="zn animated bounceInUp">INTEGRATED</span>
        </span>
        </div>


        <div>
        <span id="solution">
            <span class="dr animated bounceInUp">Solutions</span>
         </span>


        <span id="provider">
            <span class="de animated bounceInUp">Provider</span>
        </span>


        </div>

    </div>

and CSS

<style>

  #logo                       { color:#000; font-family: 'Montserrat', sans-serif; text-align:center; margin-top:150px; height:570px; }
    #logo span                  { display:inline-block; }
    #logo #a                    {margin-right: 10px; font-size:40px; }
    #logo #leading                  {font-size:40px; }
    #logo #mep                  {margin-right: 20px; font-size:80px;}
    #logo #integrated                   { font-size:80px; }
    #logo #solution                     {margin-right: 20px; font-size:50px;}
    #logo #provider                     {font-size:50px;}

    @media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {

    #logo                       { color:#000; font-family: 'Montserrat', sans-serif; text-align:center; margin-top:150px;}
    #logo span                  { display:inline-block; }
    #logo #a                    {margin-right: 20px; font-size:15px; }
    #logo #leading              {font-size:15px; }
    #logo #mep                  {font-size:30px;}
    #logo #integrated           { font-size:30px; }
    #logo #solution             {margin-right: 20px; font-size:20px;}
    #logo #provider             {font-size:20px;}




/* logo */

    .dd                         { animation-delay:0.2s; -moz-animation-delay:0.2s; -webkit-animation-delay:0.2s; }
    .da                         { animation-delay:0.8s; -moz-animation-delay:0.8s; -webkit-animation-delay:0.8s; }
    .dn                         { animation-delay:0.6s; -moz-animation-delay:0.6s; -webkit-animation-delay:0.6s; }
    .dg                         { animation-delay:1s; -moz-animation-delay:1s; -webkit-animation-delay:1s; }
    .de                         { animation-delay:0.4s; -moz-animation-delay:0.4s; -webkit-animation-delay:0.4s; }
    .dr                         { animation-delay:1.2s; -moz-animation-delay:1.2s; -webkit-animation-delay:1.2s; }

    .zz                         { animation-delay:1.4s; -moz-animation-delay:1.4s; -webkit-animation-delay:1.4s; }
    .zo                         { animation-delay:0.4s; -moz-animation-delay:0.4s; -webkit-animation-delay:0.4s; }
    .zn                         { animation-delay:0.6s; -moz-animation-delay:0.6s; -webkit-animation-delay:0.6s; }
    .ze                         { animation-delay:0.5s; -moz-animation-delay:0.5s; -webkit-animation-delay:0.5s; }

}

demo http://abskillz.com/bkg-new/ch.html

Answer 1

The thing that brings a lot of height is the 570px that you are giving to #logo. Do you really need it? The text blocks inside logo give their parent a natural height if you don't do anything like position: absolute.

Your problem should be fixed by adding overflow-y: hidden; to the #logo.

Example: http://codepen.io/brav0/pen/ENrKXR?editors=1100