アイソトープの要素がインラインで表示されない

Question

Wordpressのサイトでisotopeを使用していて、インラインで要素が表示されないという問題があります。

各グリッド要素の幅を25vwと高さ25vwに設定しました。

大きな画面サイズで最初のページを読み込むと、グリッドアイテム4が表示されます。

ブラウザの幅を小さくすると要素が小さくなりますが、横に3つの項目しか表示されません。

4つのアイテムをすべての画面サイズで表示させてください。

// 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> 

Answer 1

あなたは同位体のドキュメントhereを参照することができ

.element-item--width2 { width: 25%; } 

を設定してください。