Q.トップページの画像がスマホでは左右が見切れてしまうのですが、改善する方法はありますか？
UNIQUEはレスポンシブなテーマですので、PCであってもスマホであっても同一のプログラムコードを出力しております。そのプログラムでは、画像の「縦横比を維持する」と同時に「画面いっぱいに表示する」という仕様でございます。その為、スライダーに横長の画像を採用すれば、スマホの縦画面では、左右が見切れる事になります。
仮にスマホの縦画面でも画像の縦横比を維持したまま、左右を切れることなく表示させようとすると
スライダーの下あたりに不要な余白が発生する可能性がございます。
もし、スライダーの下に余白ができてもいいので、左右切れることなく表示させる方法であれば下記の方法をお試しください。
A.該当ファイルを編集してください
テーマオプションの「基本設定」＞「カスタムCSS」をご利用頂く方法がございます。
下記コードをカスタムCSSに追加してください。
@media only screen and (max-width: 767px) {
.owl-item .item{ background-size:contain !important; background-position:top left !important; }
}
この記事は役に立ちましたか？
もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます！