SWIPER実装CSS編

閲覧数: 20(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閑話, 公開タグ, , , ,
ElasticPress 3.5.6

マイナーバージョンアップにも関わらず、検索スコアリングのパラメータが微調整された結果、期待する検索結  続きを読む

緊急事態宣言で外出自粛になり...
blank

せっかくのゴールデンウィークなのに、2年連続で緊急事態宣言下となり、外出自粛中。暇なので小ネタで遊ぶ  続きを読む

閃きは大事だw
blank

このサイトは、あくまでもCMSであるWordPressの構築やクラウドであるAWSの運用ノウハウ取得  続きを読む

閲覧数まとめ
blank

閃きついでに総合計と週合計をフラグで制御する方式に変更してみた。これまではベタに関数をまるまるコピー  続きを読む

タイトルを抜粋する
blank

関連記事プラグインを使って、記事本文の下に「関連記事」を表示している。情報としては、タイトル、画像、  続きを読む

ページナビのテキスト
blank

記事ページの下部に前後の記事(投稿)へのリンクが表示される仕様なのだが、「カテゴリーに制限」をかけて  続きを読む

スポンサーリンク

コメントを残す

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