CODEWITHSUNDEEP
twitter-bootstrapjquery-masonry
Igor Carmagna
Igor Carmagna

Reputation: 957

Masonry seems to override bootstrap default responsive column width

The following is a basic Masonry example:
https://jsfiddle.net/Smartix/n5ks39LL/

As you can see, I have a '.masonry-wrapper' row that contains 4 '.col-sm-6' divs.
So (as per standard bootstrap behaviour) at xs screen size, the 4 divs should expand to 100% width and stack one under the other. Basically they should behave like 4 col-xs-12 divs!!
BUT, because the columns have little content, Masonry decides on its own that they should have a width equal to their content!!

If you look at the fiddle, you will see that only div 4 behaves like a true col-xs-12 (because it has a line of text long enough)

HTML:

<div class="container">
<div class="row masonry-wrapper">
    <div class="col-sm-6 item bc1">
        <p>Div 1</p>
    </div>
    <div class="col-sm-6 item bc2">
        <p>Div 2</p>
        <p>Div 2</p>
        <p>Div 2</p>
        <p>Div 2</p>
    </div>
    <div class="col-sm-6 item bc3">
        <p>Div 3</p>
    </div>
    <div class="col-sm-6 item bc4">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed hendrerit nisi. Donec vehicula magna eu tellus bibendum vehicula. Fusce tempus tellus purus, sed porta.
        </p>
    </div>

</div>
</div>

JS: 

var $container = $('.masonry-wrapper');
$container.masonry({itemSelector: '.item'});

CSS: 

.bc1 {background-color: #00bfb2;}
.bc2 {background-color: #de9800;}
.bc3 {background-color: #ff69da;}
.bc4 {background-color: #38ff59;}

Is this a bug or a misconfiguration?

Upvotes: 0

Views: 882

Answers (1)

q0re
q0re

Reputation: 1359

You need to declare your .item style.

for example:

.item { width: 50%; } // 50% is equal to col-sm-6

To work for both device sizes add mobile first behaviour with media queries. https://jsfiddle.net/nx6mjkqr/

OLD

Alternatively you can change your js code to:

$container.masonry({itemSelector: '.col-sm-6'});

But this only works if window size is sm.

Upvotes: 1

Related Questions