2017-05-14 7 views
0

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

답변

0

봅니다

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

당신은 동위 원소 문서 here를 참조 할 수 있습니다 설정합니다.