YoroDiallo YoroDiallo - 1 year ago 40
CSS Question

content on the small screen is breaks

I wanna make a content with background image, some text and registration button. in normal and big screen it looks fine, but on small screen it breaks. I try to set some classes for xs like

but It's not works.. where I'm wrong?


<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 class="col-md-4 col-xs-12 about-join">
<span>Ut enim ad?</span>
<a href="#" class="btn btn-warning join-button">minim veniam,
<span class="volunteer-info">nostrud exercitation ullamco laboris<a href="#"> laboris nisi ut aliquip</a>
<div class="row">
<div class="col-md-12 col-xs-12 about-text">
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
<br />
<br />
<span>proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>

how it looks you can see on plunkr

Answer Source

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:


@media screen and (max-width: 480px){
   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