YoroDiallo YoroDiallo - 4 months ago 9
CSS Question

Bootstrap responsive layout is breaking on small screens

For normal and high resolution screens it displays fine, but on small resolution screens it breaks. I tried using classes like

col-xs-12
but it still did not display properly.

<div class="container-fluid about-page-background">
<div class="container" style="height: 289px; margin-top: 60px; padding-left: 60px; padding-right: 60px;">
<div class="row">
<div class="col-md-8 col-xs-12 about-staf">
<span>Lorem ipsum dolor sit amet</span>
<span>consectetur adipisicing elit, sed</span>
<span>do eiusmod tempor incididunt ut</span>
<span>labore et dolore magna aliqua.</span>
</div>
<div class="col-md-4 col-xs-12 about-join">
<span>Ut enim ad?</span>
<a href="#" class="btn btn-warning join-button">minim veniam,
quis</a>
<span class="volunteer-info">nostrud exercitation ullamco laboris<a href="#"> laboris nisi ut aliquip</a></span>
</div>
</div>
<div class="row">
<div class="col-md-12 col-xs-12 about-text">
<span>
ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
</span>
<br />
<br />
<span>proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
</div>
</div>
</div>
</div>


The full code can be viewed on plunkr.

Answer

You are given fixed height: 600px to the div. So when changing the width, content should automatically adjust to the space and will go down.

You can only do onething, if you want the hieght to be fixed 600px, do meadia query. Using media query reduce font size and padding.

for example:

CSS

@media screen and (max-width: 480px){
  .container{
   padding: 1em !important;
  }
  .col-md-8.col-xs-12.about-staf span{
   font-size: 27px;
  }
}

Note: all the classes above are from your plunkr only.

like this reduce width of button, font size, other paddings etc

Comments