Блок ленты последних записей на главной странице. Идея была в том, чтобы при меньшем размере экрана, четвертый блок исчезает (@media screen and (max-width:1020px) {section.news .block:nth-child(4){display: none}})
На мобильной версии сайта возникают проблемы в блоке flex. Если смотреть макет на компьютере в статичной версии сайта, все нормально. Но после того как загружаю на движок wp в файл php, при исчезании блоков, оставшиеся не делаются на всю ширину. Почему?
<div class="flex">
<?php $catquery = new WP_Query( 'category_name=news' ); ?>
<?php while($catquery->have_posts()) : $catquery->the_post(); ?>
<div class="block">
<?php
$thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'img-news');
list($url, $width, $height, $is_intermediate) = $thumbnail;
?>
<a href="<?php the_permalink() ?>"><div class="img-news" style="height:<?php echo $height; ?>px;background-image:url(<?php echo $url; ?>);background-repeat:no-repeat;"></div></a>
<div class="data-desc"><span class="num-d">23</span>июля 2018</div>
<div class="desc-area">
<h4><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h4>
<p><?php the_excerpt(); ?></p>
<span class="link-d"><a href="<?php the_permalink() ?>">Подробнее</a></span>
</div>
</div>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
</div>
