Search code examples
csstwitter-bootstrap-3packery

Packery positionering with bootstrap

I've got a two column layout with Packery in the main column.

This is working fine on extra small devices, small devices and large devices. On medium devices the "2-column box" is not on side of the other. It is jumping underneath it.

I've made a codepen of this issue: http://codepen.io/anon/pen/pwJsa

I hope somebody can help!

Solution

  • Found it, thnx to this threat: https://github.com/metafizzy/packery/issues/42

    The solution is to make width of the boxes a bit smaller with calc():

     .grid-sizer {
    width: 25%;
    width: -webkit-calc( 1/4 * 100% );
    width: calc( 1/4 * 100% );
    height: 150px;
 }

.box2 {
   ...
   width: 50%; 
   width: -webkit-calc( 2/4 * 99.5% );
   width: calc( 2/4 * 99.5% );
   float: left;
   ...

    }

    the Codepen example: http://codepen.io/anon/pen/tprxc