0

I have a client with a WP install and Genesis theme. I am using masonry to tile posts on a specific category. The problem I am having is that there is other content on the page that the masonry overlaps (category description). I have tried $window.on('load', function(){

and I have tried setting a timeout to delay the masonry.

No matter what I do, when masonry initializes, the posts cover the description content. Any suggestions? Thanks in advance.

EDIT: masonry code in use ->

jQuery(window).on('load',function($) {
var $container = jQuery('#content');
// initialize
$container.imagesLoaded( function() {
$container.masonry({
columnWidth: 1,
itemSelector: '.post'
});
});
});

Live link on site: http://landmark2skate.com/category/secret-stash/

Thanks for taking a look.

chris
  • 1,022
  • 12
  • 14

2 Answers2

1

this is more of a css issue

[ Text ] - Your text block is 1 single element

[ Masonry ] - your boxes covering your text is many individual divs with the style of position:absolute

Without a parent div that contains these individual item divs your masonry will positioned absolute to the first parent position relative container you have.

vico
  • 2,093
  • 2
  • 15
  • 35
  • Thanks, looks like I have to write a custom loop to take care of it. – chris May 28 '14 at 19:07
  • what you need is a containing div
    ------- right now your web looks like this
    – vico May 28 '14 at 19:25
  • Exactly what Im going for. I might be able to pull it off with a hook in Genesis so I dont have to rewrite the whole loop and jack all the css. – chris May 28 '14 at 19:30
0

You've got your 'columnWidth' set to '1'. That means 1 pixel. Try setting it to a larger amount like 250.

See the example here:

http://masonry.desandro.com/options.html

BIOSTALL
  • 1,616
  • 12
  • 22
  • actually, I should have it unset, because I want it to take the hint from the first element (1 has worked for me also). – chris May 28 '14 at 19:15