CODEWITHSUNDEEP
csstwitter-bootstrap-3
Bobby
Bobby

Reputation: 97

Twitter bootstrap 4 columns not resizing correctly

I have the code setup in my markup to have four columns. However, when they are responsive, they downsize to two columns at ipad device resolution which is fine. But when at mobile view when browser is resized all the way down, it still shows two columns on each row and squeezes everything which makes it looks bad.

Here is full browser screen: http://postimg.org/image/jjmr0tukf/

Here is mid level screen: http://postimg.org/image/5azcliqiv/

(needs fixed) Here is the mobile screen: http://postimg.org/image/60ieuy9cd/

Here is the markup:

<div class="container center">
    <div class="inside_africa">
    <div class="row feature_wrap">
        <div class="flexible_products">
        Flexible Products
        </div>
<div class="col-xs-6 col-sm-3">
<div class="feature">
<img src="../../images/database.svg" id="feature_image" style="height: 100px; width: 100px">
<div class="inside_feature">
<h3>Database Driven</h3>
<p>Our custom web applications are strategically planned out to give you the right model you need for your company.</p>
</div>

</div>
</div>

<div class="col-xs-6 col-sm-3">

<div class="feature">
<img src="../../images/design_paint.svg" id="feature_image" style="height: 100px; width: 100px">
<div class="inside_feature">
<h3>Design</h3>
<p>We provide responsive design that allows your web application to fit any device and with a touch of craft.</p>
</div>
</div>
</div>

<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs-block"></div>

<div class="col-xs-6 col-sm-3">
<div class="feature">
<img src="../../images/development.svg" id="feature_image" style="height: 100px; width: 100px">
<div class="inside_feature">
<h3>Development</h3>
<p>Through each phase we add functionality or bells and whistles to make the best product.</p>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<div class="feature">
<img src="../../images/dedication.svg" id="feature_image" style="height: 100px; width: 100px">
<div class="inside_feature">
<h3>Dedication</h3>
<p>We do not look at projects but relationships. We are here to serve you and provide you with the best service possible.</p>
</div>
</div>
</div>
</div>


<div class="technology"><img src="../../images/technology.png" id="backdrop"></div>
    </div>
</div>
<!--/.container-->

Upvotes: 1

Views: 1269

Answers (1)

Marcin Nabiałek
Marcin Nabiałek

Reputation: 111829

I'm not Bootstrap expert, but you should probably change:

<div class="col-xs-6 col-sm-3">

to:

<div class="col-xs-12 col-sm-6">

to take full page width (12 columns) for extra small devices and to take half screen (6 columns) for small devices and larger

EDIT

And if in larger views you want to have 4 columns you should change it into:

<div class="col-xs-12 col-sm-6 col-md-3">

or

<div class="col-xs-12 col-sm-6 col-lg-3">

depending if you want to have 4 columns only for extra large devices or for both extra large and medium devices.

Upvotes: 1

Related Questions