CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstraptwitter-bootstrap-3
Peter Wateber
Peter Wateber

Reputation: 3948

jquery masonry responsive alignment with bootstrap on window resize

I'm having this output whenever I resize the browser

enter image description here

The boxes should be closed to each other. I wonder how can I do this with jquery masonry or css. Any help/suggestion would do.

Note: I can resolve this by disabling the responsiveness of Masonry plugin but the responsive-css of bootstrap wont work.

Upvotes: 1

Views: 258

Answers (1)

mitsest
mitsest

Reputation: 295

I believe what happens is that, when resizing the window from full-screen to really small width, firstly the masonry plugin does its job by changing the top of each article, and afterwards bootstrap's javascript kicks in and changes col-md containers' width to fit the whole page, forcing the text to wrap in less lines, so the height of the col-md container becomes smaller and leaves a lot of space between the items.

What worked for me, was adding a col-xs class (which is used on small screens) to my col-md containers.

Cheers!

Upvotes: 1

Related Questions