CODEWITHSUNDEEP
jquerygridfluid-layoutjquery-isotope
Alexandre
Alexandre

Reputation: 11

Isotope Issue: Masonry Column Width Twice as large as it was defined in code

This is very weird and very throughouly researched on the web by me. I didn't find any solutions.

The jQuery says:

$container.isotope({ itemSelector : '.post', masonry: { columnWidth: 250, }
});

The .post's style says:

.post { width:250px; }

When Isotope defines the .post's positions, the second column is positioned 500px from the left of the page. The third column, 1000px from the left of the page. It's like each column is getting width of 500px.

The link is: http://asimob.tv

Getting bald and hypertensive with this. I would really, really appreciate some help. Please!

Upvotes: 1

Views: 1503

Answers (2)

DominicM
DominicM

Reputation: 6908

I had the same problem, it seems that the "columnWidth" property is NOT just the width of the element(.post for example) but rather the width + the margins.

So the columnWidth should be equal to element width + (margin x 2).

Hopefully this might be helpful to someone who stumbles on this issue.

Upvotes: 2

Justice Erolin
Justice Erolin

Reputation: 2879

Remove the columnWidth:250 in the options section when you initiate Isotope.

Upvotes: 0

Related Questions