サポート » テーマ » AccessPress Rootバージョン: 1.28のスマホ用スライダーのサイズ変更

  • AccessPress Rootバージョン: 1.28を使用していますが、
    スマホ用トップページのスライダーが、PCと同じ縮尺になるので高さが低いため、
    スマホ用のスライダーの画像の高さを大きくして、横幅ははみ出た部分はhiddenに
    したいと考えいます。

    どの部分を変更すれば、可能でしょうか。
    下記が、トップページのテンプレートになります。
    こちらの中に変更可能な個所がありますでしょうか。
    それとも、cssの方でしょうか。
    よろしくお願いします。

    [モデレーター編集: 長すぎるコード引用がありましたので削除しました。コード引用には外部のペーストビンサービスを利用してください。]

    • このトピックは lalala76が1 週、 6 日前に変更しました。
    • このトピックは1 週、 6 日前に  Takayuki Miyoshi さんが編集しました。理由: 長すぎるコード引用を削除
3件の返信を表示中 - 1 - 3件目 (全3件中)
  • CG

    (@du-bist-der-lenz)

    スライダーはPCのアスペクト比が保持されるようなので、モバイルはAMPすることを提案します。

    こんにちは

    スタイルシートに以下のスタイルを追加ください。
    ※子テーマで何がしかのcssを追加して読み込ませることをお勧めします。

    /* Landscape phone to portrait tablet */
    @media (max-width: 767px) {
    	#main-slider .bx-wrapper img{
    		max-width: none;
    	}
    	#main-slider .bx-viewport {
    		height: 400px !important;
    	}
    }

    画面サイズが787px以下の場合は
     1) 画像の最大幅を無効
     2) スライダー表示域の高さを400px
    にしています。
    はみ出た部分を表示しなくするのはテーマのスタイルでそのようになっています。
    高さはご希望の高さに合わせて調整してください。
    ただ、表示域の高さを変更しているだけなので、そこを画像の高さを伸縮したいならもう一工夫必要そうです。

    表示される画像の範囲は左上固定になるので、中央あたりにしたい場合などはpositionを追加するなどすれば調整できるかもしれません。

    ブラウザの幅を狭めることでしか動作確認してませんので、実際のスマホでも正常に動くかはちょっと分かりません。

    • この返信は1 週、 6 日前に  munyagu さんが編集しました。

    munyagu 様

    ありがとうございます!

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • このトピックに返信するにはログインが必要です。