Les colonnes de la grille d'amorçage se chevauchent lorsqu'elles sont redimensionnées

Question

Lorsque je redimensionne, ma section principale chevauche ma dernière section. Je ne sais pas ce qui cause cela, et j'espère que quelqu'un pourra enfin mettre fin à ma misère.

.l-latest { 
\t margin-bottom: $theme-margin; 
\t margin-top: 0; 
\t height: 270px; 
} 


.latest-item { 
\t height: 270px; 
} 

.last-item h2 { 
\t line-height: 270px; 
} 


     <!-- LATEST --> 

     <section class="latest l-latest"> 

      <div class="container"> 
       <div class="row"> 
        <div class="col-md-4"> 
         <div class="latest-item"> 
          <a href=""><h2>READ OUR REVIEWS</h2></a> 
         </div> 
        </div> 
        <div class="col-md-4"> 
         <div class="latest-item"> 
          <a href=""><h2>UPCOMING EVENTS</h2></a> 
         </div> 
        </div> 
        <div class="col-md-4"> 
         <div class="latest-item"> 
          <a href=""><h2>LATEST PHOTOS</h2></a> 
         </div> 
        </div> 
       </div> 
      </div> 

     </section> 



     <!-- MAIN --> 

     <section class="main l-main"> 

      <div class="container"> 
       <div class="row"> 
        <div class="col-md-8"> 

         <h2>LATEST POTSTS</h2> 
         <hr> 

         <a href=""><img src="images/post1.jpg" alt=""></a> 
         <h2>What happend last friday</h2> 
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in...read more <i class="fa fa"></i></p> 
         <ul class="author"> 
          <li><i class="fa fa"><a href="#">Vlad</a></i></li> 
          <li><time>August 13th, 2015</time></li> 
          <li><i class="fa fa"><a href="#">0 Comments</a></i></li> 
         </ul> 
        </div> 
         
        </div> 
        </div> 
       
      </div> 

     </section> 
    

Answer 1

Cela arrive parce que .l-latest a une hauteur fixe de 270px. En 'mode smartphone/tablette', vos divs sont empilés, ce qui signifie qu'ils ont une hauteur de 3 * 270px (= 810px), mais que les derniers ne couvrent que 270px.

Supprimez 270px de .l-latest ou ajoutez une requête média pour définir la hauteur: auto on .l-latest.