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)
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...
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
}
});
});
Rowela 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;
}
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.