jQuery Masonry with Wordpress not displaying right

Barefoot

New Member
I've set up Masonry to work with a Custom Post Type on a site I'm trying to build, but I have a problem with the way Masonry's displaying my posts. Instead of always having the same margins and flowing beautifully on the page, the posts stack in three (with exception of a few) and then skip huge amounts of the page before stacking in yet another three.Here's an example of what's going wrong.My head:\[code\]<?php wp_enqueue_script("jquery"); ?> <?php wp_head(); ?> <script language="javascript" type="text/javascript" src="http://stackoverflow.com/questions/15518579/<?php bloginfo('template_url'); ?>/js/jquery.masonry.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function($){ $('#kampanjer-container').masonry({ itemSelector: '.kampanjepin', columnWidth: 226, singleMode: true }); });</script>\[/code\]Here's the page template loop:\[code\]<!-- Start the Loop. --> <div id="kampanjer-container"> <?php $args = array( 'post_type' => 'kampanje', 'posts_per_page' => '15', ); $kampanje = new WP_Query( $args ); if( $kampanje->have_posts() ) { while( $kampanje->have_posts() ) { $kampanje->the_post(); ?> <article class="kampanjepin"> <?php if ( has_post_thumbnail() ) { the_post_thumbnail(); } ?> <h3><?php the_title() ?></h3> <div class='kampanje-content'> <?php the_content() ?> </div> </article><!-- END .kampanjepin --> <?php } } else { echo 'Ingen kampanjer for ?yeblikket!'; } ?> </div><!-- END #kampanjer-container -->\[/code\]And my style:\[code\]#kampanjer-container { margin: 25px 0 0 -10px; width: 670px;}.kampanje-content { width: 182px;}.kampanjepin { float: left; margin: 10px; padding: 10px; -moz-box-shadow: 0 0 7px 0px rgba(0,0,0,0.07); -webkit-box-shadow: 0 0 7px 0px rgba(0,0,0,0.07); box-shadow: 0 0 7px 0px rgba(0,0,0,0.07); background-color: #ffffff; width: 182px;}.kampanjepin img { background-color: #ececec; max-width: 182px; max-height: 125px; display: block; text-align: center;}.kampanjepin h3 { font-size: 0.850em; font-weight: bold; margin: 10px 0 5px 0; color: #000000;}.kampanjepin p { font-size: 0.750em;}\[/code\]If anyone can help me figure this out it would be great! :)Michael
 
Back
Top