同位素元素未顯示內聯

Question

我在我的Wordpress網站中使用了同位素，並且存在與它不存在內聯問題的問題。

我已經設置每個網格元素的寬度爲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

嘗試設置

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

您可以參考同位素文檔here。