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

TCDテーマNOEL:スマホ表示時にトップページのボックスコンテンツを横並びに表示させる方法

Q.トップページのボックスコンテンツについて、スマホでは縦に並んで表示されますが、パソコンと同じように横並びで表示させたいのですがどうすればよいでしょうか?

この箇所では、スマホで表示した際には縦並びで各コンテンツが表示されます。横並びで表示させると各画像が小さく表示されてしまいますので、デザイン上の仕様です。
 
▼変更箇所イメージ(PC表示時)
変更箇所イメージ

A.下記の方法でご対応ください。

TCDテーマ>サイト基本設定のカスタムCSSに入力してください。

@media screen and (max-width: 750px) {
  /*ボックスコンテンツを2つ表示する場合*/
  .index_box_content.type1 .box { width: 50%; float: left; }

  /*ボックスコンテンツを3つ表示する場合*/
  .index_box_content.type2 .box { width: calc(100% / 3 - 0.01px); float: left; }
}

 
補足)
タイトル、サブタイトル、キャッチフレーズのテキスト量によってはコンテンツ内が窮屈に感じられるということがあるかもしれません。表示されるテキストをPC・スマホ別々で設定することは出来ませんので、テキスト量を調整頂くことや、文字サイズの設定を見直して頂くことにてご対応をお願いいたします。

この記事は役に立ちましたか?
もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます!

TCD LABO ご利用上の注意

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

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

お問合せ・ご要望

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