WordPressテーマTCDのカスタマイズを研究するサイト

TCDテーマUNIQUE:スマホで画像の左右が見切れる時の対策方法

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; }
}
The following two tabs change content below.

タカ

スポーツが好きな30代男性です。 休みの日はフットサルやバスケットをしています。

関連記事

TCD LABO ご利用上の注意

TCD LABO(ティーシーディー・ラボ)に掲載しているTCDテーマのカスタマイズ情報のご利用にあたっては、必ずカスタマイズするファイルのバックアップをご用意の上、ご利用者様責任において実施していただきますようお願いいたします。

カスタマイズの実施により生じたいかなる不具合等についてもTCD LABOはその責任を負いかねます。
何卒ご理解、ご了承の上、当サイトをご活用いただけますようお願い申し上げます。

お問合せ・ご要望

TCDLaboへのお問合せやご要望は
ご連絡フォーム をご利用ください。