Jc John Jc John - 1 month ago 5
CSS Question

div goes down when page view 737 width w/ bootstrap

i am stuck with this. I am working with the responsiveness of my custom site. I am using bootstrap. Why does my

<div class="col-xs-4">
goes down in a view of 737x width. Here is the screenshot :
Screenshot

i want the boxes of image to be in the right side of the text. my image are inside of the
<div class="col-xs-4">

Here is the jsfiddle:https://jsfiddle.net/DTcHh/26370/

here is my structure:

<div class="container-fluid">
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-8">
<div class="row row-left">
<div class="col-xs-4 col-box2">

</div>
<div class="col-xs-4 col-box2">

</div>
<div class="col-xs-4 col-box2">

</div>
<div class="col-xs-4 col-box2">

</div>
</div>
<div class="row row-left">
<div class="col-xs-4 col-box2">

</div>
<div class="col-xs-4 col-box2">

</div>
<div class="col-xs-4 col-box2">

</div>
<div class="col-xs-4 col-box2">

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


my css:

.col-box2 img {
width: 80%;
height: auto;
}
.col-box2 {
display:inline-block;
float:none;
text-align:left;
margin-right: 3.6%;
width: 15.6%;
margin-bottom: 2%;
}
.row-left {
margin-right: 0;
text-align: left;
}

Answer

See if this helps you:
https://jsfiddle.net/panchroma/DTcHh/26371/

On line 3 and line 5 of your HTML you had

<div class="col-md-4">

and

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

but when they collapse it also affects their children, in this case your col-xs-4 elements

You'll see I've changed lines 3 and 5 of your HTML to

<div class="col-xs-4">

and

<div class="col-xs-8">

and all is good.