WordPressテーマXeory Extensionのトップページに設置されている最近の投稿の表示記事数を、スマホから見た時に10記事にできますでしょうか

Question

前提・実現したいこと

WordPressテーマ「Xeory Extension」のトップページに設置されている最近の投稿の表示記事数を、スマホから見た時に10記事にしたいです。
Xeory Extension公式デモページ：https://xeory.jp/extension/

発生している問題・エラーメッセージ

記事表示数の'showposts'=>5, を'showposts'=>10,に書き換えましたら、パソコンから見た時は10記事表示されましたが、
スマホから見ますと本来4、5番目にくる記事がぬけて8記事しか表示されなく困っております。
(元々のテーマの設定は、スマホから見た時は3記事、パソコンから見た時は5記事が表示されるようになっていました。)
こちらのテーマがとても好きで、ぜひ使いたくどうかご教示いただけましたら幸いです。

該当のソースコード

<div id="recent_post_content" class="front-loop"> <h2><i class=""></i>最近の投稿</h2> <div class="wrap"> <div class="front-loop-cont"> <?php $i = 1; wp_reset_query();

    $args=array(
        'meta_query'=>
        array(
          array(  'key'=>'bzb_show_toppage_flag',
                     'compare' => 'NOT EXISTS'
          ),
          array(  'key'=>'bzb_show_toppage_flag',
                    'value'=>'none',
                    'compare'=>'!='
          ),
         'relation'=>'OR'
      ),
        'showposts'=>10,
        'order'=>'DESC'
      );

  query_posts($args);
  
  if ( have_posts() ) :
    while ( have_posts() ) : the_post();

    $cf = get_post_meta($post->ID);
    $recent_class = 'popular_post_box recent-'.$i;

?>

<article id="post-<?php echo the_ID(); ?>" <?php post_class($recent_class); ?>> <a href="<?php the_permalink(); ?>" class="wrap-a"><?php if( get_the_post_thumbnail() ) { ?> <div class="post-thumbnail"> <?php the_post_thumbnail('loop_thumbnail'); ?> </div> <?php } else{ ?> <img src="<?php echo get_template_directory_uri(); ?>/lib/images/noimage.jpg" alt="noimage" width="800" height="533" /> <?php } // get_the_post_thumbnail ?> <p class="p_category"><?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?></p> <h3><?php the_title(); ?></h3> <p class="p_date"><span class="date-y"><?php the_time('Y'); ?></span><span class="date-mj"><?php the_time('m/j'); ?></span></p></a> </article> <?php $i++; endwhile; endif; ?>

  </div></a>

</div><!-- /front-root-cont --> </div><!-- /wrap --> </div><!-- /recent_post_content -->

試したこと

・'showposts'=>5, を'showposts'=>10,に書き換えました。
・WordPress設定の表示設定から、1ページに表示する最大投稿数を10に変更しました。
・表示数を20などでも試してみましたが、4、5番目がぬけてしまいます。

Answer 1

全体的なCSSも絡んでくると思うので、今の情報だけでは回答は難しいと思われます

テーマをインストールして検証してくれる優しい人がいれば別ですが・・・・

まずは、chromeのデベロッパーツールで、4.5番目の記事がSPの時にHTMLが出力されているか？

CSSはdisplay noneになっていないか？

その記事のHTMLがあるならCSSで、その記事の並び順を一番上にしたり
その記事だけ背景を真っ黒のしてみたり
その記事の写真をDisplay　noneで消してみたり（画像が縮小されずカラム落ちしている可能背もあるため
まだまだ、検証したり試せることはいっぱいあるので頑張ってみてください。

デベロッパーツールを使いこなせたらあなたのスキルはカナリアップしますので是非使ってください。

Comments

[riika]

AMK様

貴重なお言葉をいただき深くお礼申し上げます。
chromeのデベロッパーツールで色々調べてみましたら、仰せの通り4、5番目の記事がdisplay noneになっていてその部分を削除することで解決できました。
いくつか例を出してくださったのがとても分かりやすかったです。
アドバイスがなければ気付けないままで、ようやく直った時は嬉しくて泣きそうでした。
本当にありがとうございました！

Answer 2

style.cssの下記部分(4,5番目の記事)がdisplay noneで非表示になっていました。
下記を削除しましたら、4,5番目も表示されて10記事表示されるようになりました。

body.home .front-loop .popular_post_box.rank-4, body.home .front-loop .popular_post_box.rank-5, body.home .front-loop .popular_post_box.recent-4, body.home .front-loop .popular_post_box.recent-5 {
display: none;
}