Div減ったときにDivをオーバーラップする

Question

ここに少し問題があります。私の画面を縮小すると、何らかの理由でその下の白いdivに色「グレー」が流れます。上記のdivは私のジャンボトロンなので、なぜこれが起こっているのか分かりません。

私のウェブサイトは、あなたがチェックアウトして、コンピュータでそれを減らすとどうなるかを見るためのものです。ここで

hustlebussellunlimited.com

あなたがより多くを必要とする場合は、以下の私のCSSコードの一部である、私に教えてください。ここで

.jumbotron{ 
    background: linear-gradient(
      rgba(0, 0, 0, 0.1), 
      rgba(0, 0, 0, 0.2) 
    ), url(main-banner.jpg); 
    background-size: cover; 
    color: #ffffff; 
    padding: 0; 

} 
.jumbotron .intro{ 
    background: rgba(0, 0, 0,0.1); 
    padding-top: 120px; 
    padding-bottom: 40px; 
    min-height: 400px; 
} 

.jumbotron .intro .row-top div.ccont{ 

} 
.row-bottom{ 
    margin-top: 20px; 
    margin-bottom: 20px; 
} 

.jumbotron div.ccont{ 
    background: #fff; 
    min-height: 150px; 
} 
.jumbotron .row-top div.ccont{ 
    -webkit-box-shadow: 0px 1px 2px rgba(100, 100, 100, 0.75); 
    -moz-box-shadow: 0px 1px 2px rgba(100, 100, 100, 0.75); 
    box-shadow:   0px 1px 2px rgba(100, 100, 100, 0.75); 

} 

.jumbotron .row-bottom div.ccont{ 
    -webkit-box-shadow: -1px -1px 2px rgba(100, 100, 100, 0.75); 
    -moz-box-shadow: -1px -1px 2px rgba(100, 100, 100, 0.75); 
    box-shadow:   -1px -1px 2px rgba(100, 100, 100, 0.75); 

} 

.jumbotron p{ 
    padding: 20px 0; 
} 

.jumbotron .media{ 
    margin: 50px 0; 
} 
.jumbotron .media-body h1{ 
    margin-top: 100px; 
} 

section.slider{ 
    color: #ffffff; 
    background: #696969; 
    margin: 40px 0; 
    padding: 40px 0; 
} 

section.slider h2{ 
    margin-bottom: 20px; 
} 

section.slider .col-md-8{ 
    padding-left: 30px; 
} 

は私のHTMLコードは、私が問題をシミュレートすることができませんでしたが、私はあなたのウェブサイトに入り、検査フィドルで

<!-- Main jumbotron for a primary marketing message or call to action --> 
<div class="jumbotron" id="home"> 
    <div class="intro"> 
     <div class="container"> 

      <div class="row"> 
       <h1 class="text-center"><span style="font-size:1.9em;">W</span>eb<span style="font-size:1.9em;">I</span>nsight</h1> 

       <p class="text-center">A Subsidiary of HustleBussell</p><br/> 
      </div> 
      <div class="row triangles"> 
       <div class="up-triangle animated fadeInUp"> 
        <div class="info"> 

         Search Engine Optimization 
        </div> 
       </div> 
       <div class="down-triangle animated fadeInDown"> 
        <div class="info"> 

         Web Development<br/> 

        </div> 
       </div> 
       <div class="up-triangle animated fadeInUp"> 
        <div class="info"> 


         Marketing 
        </div> 
       </div> 
       <div class="down-triangle animated fadeInDown"> 
        <div class="info"> 

         Systems Security<br/> 

        </div> 
       </div> 

       <div class="down-triangle animated fadeInDown visible-sm"> 
        <div class="info"> 

         Mobile App Development<br/> 

        </div> 
       </div> 

       <div class="up-triangle animated fadeInUp"> 
        <div class="info"> 


         Consulting 
        </div> 
       </div> 
       <div class="down-triangle animated fadeInDown"> 
        <div class="info"> 

         Branding<br/> 

        </div> 
       </div> 
       <div class="up-triangle animated fadeInUp"> 
        <div class="info"> 


         Growth Hacking 
        </div> 
       </div> 


      </div> 

     </div> 
    </div> 
</div> 

<section id="services"> 
<div class="container"> 
    <!-- Example row of columns --> 
    <div class="row features inner-page"> 
     <div class="col-md-12 text-center"> 
      <h2>Amplify your Reach, Achieve Massive Results</h2> 

      <p style="font-size:20px;">Many people believe they can build their brand and attract new clients by being active online only and engaging in marketing practices. This is only 
       partially true. In order to take your brand to the next level, you have to start with unrealistic thinking. Unrealistic meaning that we execute beyond what most people believe is possible. This thinking involves the client being at the starting point of it all. Ground Zero. This is what we call "Client Zero Thinking". WebInsight 
       takes you to the next level by engaging in "BackYard Marketing", generating sales leads and boosting revenue utilizing overlooked resources.</p> 
     </div> 
    </div> 



</div> 
</section> 

<section class="slider" id="features"> 
    <div class="container"> 
     <div class="inner-page"> 
      <h2 class="text-center">About Us</h2> 

      <p style="font-size:20px;" class="text-center">WebInsight is a creative marketing and technology company based in Chicago, Illinois. Our mission statement "Provide so much value 
      that the cost paid for our services is nothing compared to the benefit" is what we live by. We honor our clients and therefore we provide the best solutions 
      and services for your problems. Whether you're a company just starting or an already established business, we offer results oriented solutions to help you become a market leader.</p> 
     </div> 



     </div> 
    </div> 
</section> 

Answer 1

です。問題は、その灰色の背景を持つ要素、それぞれ.jumbotron .introに三角形が含まれていることです。

ウィンドウのサイズを変更すると、三角形は2行になりますので、.infoの高さは大きくなり、次の要素（白いもの）と重なります。 visibility:hiddenここにの三角形を隠していた(max-width: 1152px)の場合、visibility:hiddenは要素を非表示にしますが、まだスペースを占めています。あなたは要素が隠されているので、display:noneを使用する必要があり、彼らは宇宙に

コード占有しない：.visible-sm { display: block !important;}、それはコードを上書きしています：

@media (max-width: 1152px) 
.up-triangle, .down-triangle { 
/* visibility: hidden; */ 
display: none!important; 
} 

をあなたもあなたのCSSでこれを持っているので、!importantを追加しました。あなたが本当に必要な場合にのみ、!importantを使用しないことをお勧めします。

visibilityの違いについての詳細情報を読み、displayあなたは、最大のおかげだここwhat-is-the-difference-between-visibilityhidden-and-displaynone