SWIPER実装CSS編

テーマ側のレスポンシブとSWIPERの微調整です。これまではスマホの縦画面を中心に調整してきましたが、ここではスマホの横画面での表示を調整します。テーマの設定ではSWIPERによるスライダーを考慮していない為、584pxの際に「display: table-cell;」でサムネイルを縮小表示します。これではスライダー画面が崩れてしまうので、「display: block; width: 100%;」に変更します。

@media screen and (min-width: 33.375em) {

  .featured-content-wrapper .post-thumbnail,
  .featured-content-wrapper .entry-header,
  .portfolio-wrapper .post-thumbnail,
  .portfolio-wrapper .portfolio-entry-header {
    display: table-cell;
    position: static;
    vertical-align: middle;
    width: 50%;
    }

@media screen and (min-width: 33.375em) {

  .featured-content-wrapper .post-thumbnail,
  .featured-content-wrapper .entry-header,
  .portfolio-wrapper .post-thumbnail,
  .portfolio-wrapper .portfolio-entry-header {
    display: block;
    width: 100%;
/*  display: table-cell;
    position: static;
    vertical-align: middle;
    width: 50%;
*/  }

この調整でスマホ横画面では2タイトル表示となります。

最終更新日: 2019年5月25日