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>
Improve this question
1
  • if you can share a screenshot of grid with page link which you have a facing problem then I can help you. Commented Feb 18, 2019 at 11:49

1 Answer 1

Reset to default
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.

Improve this answer
1
  • 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. Commented Feb 18, 2019 at 11:49

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.