SWIPER実装CSS編

閲覧数: 19(0)

テーマ側のレスポンシブと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日】
カテゴリーIT閑話, 公開タグ, , , ,
関連記事
パンくずリスト詳細
2020年5月12日

テーマの「マイナーチェンジ」に伴って「パンくずリスト」の仕様を若干変更しました。一つ前のテーマではパ  続きを読む

カテゴリーを制限する
blank
2020年5月11日

過去に何度も書いた「カテゴリー制限」の話、元はと言えば初期に書かれた「非公開」の記事が原因です。トッ  続きを読む

マイナーチェンジ
blank
2020年3月23日

かれこれ一年近くほったらかしだったので、気合をいれて「テーマ変更」と思っていたのですが、、、いろいろ  続きを読む

6月の検索ワードまとめ
blank
2019年6月30日

6月の検索ワードのまとめです。 意外なところで「zabbixダウングレード」が複数回検索され、単独の  続きを読む

アクセシビリティ対策
blank
2019年6月23日

テーマカスタマイズの一環で、トップページに一覧表示されている「写真を左右交互に表示する」ようにした際  続きを読む

dockerとproxy
blank
2019年6月18日

dockerやdocker-composeをプロキシ環境下で使うのに苦労したので忘れないようにメモし  続きを読む

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください