I have used isotope in my WordPress site and have issues with it not displaying my elements inline.

I have set each grid element to a width of 25vw and height 25vw.

On initial page load at a large screen size I can see my grid items 4 across.

As I reduce my browser width, the elements shrink, however I can only then see 3 items displayed horizontally.

Please help me to display 4 items across at all screen sizes.

    // init Isotope
    var $grid = $('.grid').isotope({
        itemSelector: '.element-item',
    });

   .single-artist-container {
    display: inline-block;
    height: 25vw;
    width: 25vw;
    background-size: cover;
    vertical-align: middle;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    color: #fff;
    left:auto;
    top: auto;
  }
    .artist-feed .overlay {
     background: rgba(0, 0, 0, 0.7);
     height: 100%;
     width: 100%;
   }
   .artist-info {
   margin-left: auto;
   margin-right: auto;
   text-align: center;
   padding-top: 40%;
   color: #fff;
   }

<div class="artist-feed">
        <div class="grid">
                    <?php
                        $artistloop = new WP_Query( array( 'post_type' => 'artist', 'posts_per_page' => -1, 'orderby'=>'title','order'=>'ASC') );
                     if ( $artistloop->have_posts() ) :
                            while ( $artistloop->have_posts() ) : $artistloop->the_post();
                            $lineup_image = fx_get_meta('lineup_image');
                     ?>
                        <div class="single-artist-container element-item" data-days="<?php echo                     $days; ?>" style="background-image: url(<?php echo $feature_image; ?>);">
                        <a href="<?php the_permalink(); ?>">
                            <div class="overlay">
                                <div class="artist-info">
                                <h2><?php the_title(); ?></h2>
                                <h4><?php echo $country ;?></h4>
                                </div>
                        </div>
                        </a>
                </div>
                    <?php endwhile;
                endif;
            wp_reset_postdata();
                ?>
        </div>

Read more here: Isotope elements not displayed inline


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: