スマートフォンで、在籍、出勤を2列表示にしたい

スマートフォンで、在籍、出勤を2列表示にするには、以下のように変更してください。

■スマートフォンで、在籍を2列表示にする

archive-cast.php  228行目あたり

<ul id="cast-list" class="cast-list row columns small-up-1 medium-up-4 cast-lists-frame items-container no-bullet">

<ul id="cast-list" class="cast-list row columns small-up-2 medium-up-4 cast-lists-frame items-container no-bullet">

 

template-parts/page/loop-page-cast.php 9行目

<div class="cast-image small-4 medium-12 columns">

<div class="cast-image small-12 medium-12 columns">

template-parts/page/loop-page-cast.php 12行目

<div class="cast-section small-8 medium-12 columns text-left medium-text-center">

<div class="cast-section small-12 medium-12 columns text-left medium-text-center">

■スマートフォンで、出勤を2列表示にする

page-schedule.php 264行目

<ul id="schedule-list" class="cast-list row columns small-up-1 medium-up-<?php echo esc_attr( $schedule_page_column ); ?> cast-lists-frame items-container no-bullet">

<ul id="schedule-list" class="cast-list row columns small-up-2 medium-up-<?php echo esc_attr( $schedule_page_column ); ?> cast-lists-frame items-container no-bullet">

 

template-parts/page/loop-page-schedule.php  41行目

<div class="cast-section small-8 medium-12 columns text-left medium-text-center">

<div class="cast-section small-12 medium-12 columns text-left medium-text-center">

■出勤ウィジェット

style.cssか、[外観]-[カスタマイズ]-[追加css]に、以下を記述してください。

@media screen and (max-width: 48em) {
.widget_cp5_schedule_list ul.cast-list{display:flex;flex-wrap:wrap;}

.widget_cp5_schedule_list .small-up-1 > .column,.widget_cp5_schedule_list .small-up-1 > .columns{width:50%;}

.widget_cp5_schedule_list  .cast-image.small-4,.widget_cp5_schedule_list  .cast-section.small-8{width:100%;}
}