0

I have the following code that is supposed to display a masonry grid using bootstrap 4. I've tested the code but the grid will not be displayed correctly on desktop and tablets. On mobile instead there is no problem with the columns. Is there a way to fix this issue? I've loaded the masonry.js script and I've used the snippet that I've found inside the masonry official documentations.

<?php
$args = array(
  'post_type' => 'post',
  'category_name' => 'portfolio',
  'post_per_page' => '6'
);
$portfolio = new WP_Query($args);
$widths = array('3','4','5');
?>


  <div class="row grid">
<?php if( $portfolio->have_posts() ): while( $portfolio->have_posts() ): $portfolio->the_post();  ?>
    <!-- add sizing element for columnWidth -->
    <div class="grid-sizer col-sm-12 col-lg-3"></div>
    <!-- items use Bootstrap .col- classes -->
    <div class="grid-item col-sm-12 col-<?php echo 'md-' . array_shift($widths); ?> col-<?php echo 'lg-' . array_shift($widths); ?>">
      <!-- wrap item content in its own element -->
      <div class="grid-item-content">
        <a href="<?php the_permalink(); ?>">
        <img class="card-img-top w-100" src="<?php the_post_thumbnail_url('small'); ?>" id="case-studies">
        <div class="overlay-title">
          <h4 class="text-center" id="client-name"><?php the_title(); ?></h4>
        </div>
        </a>
      </div>
    </div>
<?php endwhile; ?>
<?php endif; wp_reset_postdata(); ?>
  </div>
  • if you can share a screenshot of grid with page link which you have a facing problem then I can help you. – Tanmay Patel Feb 18 at 11:49
0

You are blending the Bootstrap framework and the Masonry.js library, but asking for help troubleshooting the resulting CSS on WordPress StackExchange.

You'll have better luck on Stack Overflow :) This isn't really a WordPress question.

I will say I do notice something odd about your code which is that whatever you're trying to do with the $widths array doesn't make sense to me. When you call array_shift, it gives you the first item of the array -- and the array is thereafter shortened. So the first time you call it you get 3, then 4, then 5, then nothing ever again, and depending on how many posts you are getting, you're calling it a lot.

  • I've solved by using the bootstrap embed class .card-columns, in this way I can remove the masonry.js from dependencies. Thanks for the quick reply. – ZWPDev Feb 18 at 11:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.