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>