سؤال

Whenever I resize the webpage the text in skills overflows to the next container. I have no clue how to fix this. Any ideas?

This is the HTML:

  <div id="skills">
     <div class="container-fluid">
       <div class="row">
       <div class="col-md-4">
         <img class="img-circle" src="placehold.it/150x150">
         <h2>Skill 1</h2>
         <p>orem ipsum dolor sit amet, ad diam detracto eloquentiam eam, cum ei noster comprehensam. Ei est zril labores epicuri, vel ferri denique neglegentur ex. Malis feugiat denique cu vim. Ei mel nisl dolorum, ridens laoreet repudiandae qui </p>
         </div>
         <div class="col-md-4">
         <img class="img-circle" src="placehold.it/150x150">
         <h2>Skill 2</h2>
         <p>orem ipsum dolor sit amet, ad diam detracto eloquentiam eam, cum ei noster comprehensam. Ei est zril labores epicuri, vel ferri denique neglegentur ex. Malis feugiat denique cu vim. Ei mel nisl dolorum, ridens laoreet repudiandae qui </p>
         </div>
         <div class="col-md-4">
         <img class="img-circle" src="placehold.it/150x150">
         <h2>Skill 3</h2>
         <p>orem ipsum dolor sit amet, ad diam detracto eloquentiam eam, cum ei noster comprehensam. Ei est zril labores epicuri, vel ferri denique neglegentur ex. Malis feugiat denique cu vim. Ei mel nisl dolorum, ridens laoreet repudiandae qui </p>
         </div>
       </div>
     </div>
   </div>

And the CSS:

#skills{
max-height: 100%;   
text-align: center;
background: #f6f6f6;
height: 300px;
padding-top: 50px;}
هل كانت مفيدة؟

المحلول

Setting max-height is probably not a good idea if you want control to flow naturally inside the boxes, there isn't any visual example for this so it's hard to know what's going on for sure. Can you inspect the elements and confirm that content is spilling into the next div on the DOMs level (probably a flex thing) or it's just breaking out of its box because you are putting a max-height and the content has nowhere to run to.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top