Masonry Spacing WordPress

Emma comments:

Hi That didn't work unfortunately.

zebra webdesigns comments:

Hello Emma,
I sent PM to you.
there is error coming in the chrome console.

also if you are using jquery provided by wordpress then your code should be like.




jQuery(document).ready(function($) {

$('#post-area').masonry({
itemSelector : '.post',
isResizable: true,
isFitWidth: true,
isAnimated: true,
animationOptions: {
duration: 400,
easing: 'linear',
queue: false,
gutter:10
}
});
});


I have attached the error in image file.

zebra webdesigns comments:

I put the gutter in wrong location my bad.

here is the correct code.

jQuery(document).ready(function($) {
$('#post-area').masonry({
itemSelector : '.post',
isResizable: true,
isFitWidth: true,
gutter:10,
isAnimated: true,
animationOptions: {
duration: 400,
easing: 'linear',
queue: false,
}
});
});

Emma comments:

Hi, What is the error?

zebra webdesigns comments:

Hello Emma,

I see you have placed the below code.
columnWidth: 100
gutter:10

you have missed comma in between.
it should be like below.

$container.masonry({
itemSelector: '.post',
columnWidth: 100,
gutter:10

});

Emma comments:

Hi, Can you please chekc updated version. As you can see now the masonry shows in one line.

zebra webdesigns comments:

Hello Emma,

you have initiated the js masonry in two ways.
remove the class name js-msonry in the below area

<div id="post-area" class="js-masonry">

it should be like
<div id="post-area">

after this gutter will work properly.

here is the codepen demo
[[LINK href="http://codepen.io/anon/pen/YPbNJx"]]http://codepen.io/anon/pen/YPbNJx[[/LINK]]

Emma comments:

Hello, it still does not work?

zebra webdesigns comments:

in your function.js file you remove the columnwidth.
instead of following code

$(function() {
var $container = $('#post-area');
$container.imagesLoaded(function() {
$container.masonry({
itemSelector: '.post',
gutter:10,
});
});
});

replace it with

$(function() {
var $container = $('#post-area');
$container.imagesLoaded(function() {
$container.masonry({
columnWidth: 200,
itemSelector: '.post',
gutter: 10
});
});
});

dont change anything and paste it as such I gave and let me know.

Emma comments:

Hi I have adjusted the code. Now it shows in one line.

zebra webdesigns comments:

Ok Emma here is my final advise.

could you rename the post-area as some other name and pass it to function,

so that the existing styles can be ruled out if they are causing the issue.
Because in the codepen demo I gave it works with out any style.

If you need further advise on this then I might need FTP or you can share the screen via skype.
Skype ID: bhuvan530531

alternatively you can present your screen through teamviewer.

zebra webdesigns comments:

Hope its worked now :)