ループの記述について

読み込む記事タイトルの表示文字数を、PCとスマホで分けてくて、以下のように記述し、
ticker.jsで、1件ずつスライド表示させたいのですが、
表示はするけれど、うまく動いてくれません。
ループ内に2つあるとダメなのでしょうか？

<?php
		$args = array(
			'post_type' => 'news',
			'posts_per_page' => 5, /* 表示する数 */
		); ?>
		<?php $my_query = new WP_Query( $args ); ?>
		<ul>
			
		<?php while ( $my_query->have_posts() ) : $my_query->the_post(); ?>
		<!-- ▽ ループ開始 ▽ -->
			<li class="pcNoDisplay">
				<span class="homNewsDate"><?php echo get_the_date(); ?></span>
				<span class="homNewsCat <?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->slug; } ?>">
				<?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?>
				</span>
				<a href="<?php the_permalink(); ?>"><?php echo wp_trim_words( get_the_title(), 12, '...' ); ?></a>
			</li>
			<li class="spNoDisplay">
				<span class="homNewsDate"><?php echo get_the_date(); ?></span>
				<span class="homNewsCat <?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->slug; } ?>">
				<?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?>
				</span>
				<a href="<?php the_permalink(); ?>"><?php echo wp_trim_words( get_the_title(), 25, '...' ); ?></a>
			</li>
		<!-- △ ループ終了 △ --> 
		<?php endwhile; ?>
	</ul>
	<?php wp_reset_postdata(); ?>