Ask your WordPress questions! Pay money and get answers fast! (more info)

Center masonry within DIV WordPress

  • SOLVED

Currently my masonry is within the #wrap DIV.
I was wondering if there was anyway to center it.
Here is the code so far.

#wrap { width:100%; margin: 0px auto; padding: 0; border: 0;top: 100px; position:relative;}

<code>
// masonry code
$(document).ready(function() {
$('#post-area').masonry({
// options
itemSelector : '.post',
isResizable: true,
// options...
isFitWidth: true,
columnWidth: function( containerWidth ) {
return containerWidth / 5;}
isAnimated: true,
animationOptions: {
duration: 400,
easing: 'linear',
queue: false
}

});
});
<code>

Answers (4)

2015-03-27

Reigel Gallarde answers:

there's an error in your code... I wonder if this code works...

missing comma... last part here...

return containerWidth / 5;},

check your browsers console if you got an error...


Emma comments:

Hasn't made a change.

Also I forgot to add this bit is part of the code.
<div id="post-area" data-masonry-options='{ "columnWidth": 50, "gutter": 100, }'>


Reigel Gallarde comments:

masonry is not working.. you have 2 javascript errors.. please check your browser's console... :)


Emma comments:

How do i check this?


Reigel Gallarde comments:

if you are using chrome on windows, press ctrl+shift+j

while ctrl+shift+k on firefox


Reigel Gallarde comments:

from the look of this, seems like masonry was not even loaded... [[LINK href="http://i.imgur.com/pPmP599.png"]]http://i.imgur.com/pPmP599.png[[/LINK]]


Emma comments:

Okay, so how do i resolve this?


Emma comments:

I have assigned the class="masonry js-masonry" now masonry seems to be working, but as you can see it has caused a mess.


Reigel Gallarde comments:

i have check your masonry link... you are using a non-jquery masonry file... and yet you are trying to use jquery upon initializing it... this is why it says undefined is not a function... [[LINK href="http://desandro.github.io/masonry/jquery.masonry.min.js"]]the jquery masonry can be found here.[[/LINK]]

and if you want to stay with what you have, delete your jquery masonry initialization... the code you show us here...
instead, use something like this...

var container = document.querySelector('##post-area');
var msnry = new Masonry( container, {
// sample options
columnWidth: 200,
itemSelector: '.item'
});


Reigel Gallarde comments:

anyway, this is just a suggestion :)
find a way to fixed javascript error first.. it's easy to center things when they work properly...

2015-03-27

timDesain Nanang answers:

<strong>html</strong>

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


<strong>css</strong>

#post-area {
background: #EEE;
margin: 0 auto;
width:80%;
}

#post-area .post {
width:20%;
height: 60px;
float: left;
background: #D26;
border: 1px solid #333;
}


<strong>js</strong>
$(document).ready(function() {
$('#post-area').masonry({
itemSelector : '.post',
isResizable: true,
isFitWidth: true,
isAnimated: true,
animationOptions: {
duration: 400,
easing: 'linear',
queue: false
}
});
});

2015-03-29

Ellah Alzona answers:

Emma.
Just make a slight changes to your CSS.

Try this one.


#wrap {
width: 72%;
margin: 0 auto !important;
padding: 0;
border: 0;
top: 100px;
position: relative;
}

2015-03-27

Jayaram Y answers:

can i have the link to the page where the masonry is


Emma comments:

http://bit.ly/1F1eMu5


Jayaram Y comments:

You wanted it like this??
http://awesomescreenshot.com/0cf4qohj5e


Emma comments:

Yes, but I need it so there is spacing in-between images.


Jayaram Y comments:

Hey Emma,

Please check this link.
http://www.bubblesindia.com/bride-of-the-week/

the above link looks like this (Screenshot) - http://awesomescreenshot.com/0794qyvf56

I have done this for one my client. Is it the same you are looking at??

Thats done it html, i can provide you the html,javascript.