ホテル・結婚式場などのホームページがつくれるエレガントなデザインのテンプレート「CANON」

ワードプレステーマ別

TCDテーマSKIN:コースカテゴリー名が複数行になる際のレイアウトを調整する

WordPressテーマ「NULL」

TCD LABOはWordPressテーマ「NULL」を使用して作られています。

ダウンロード

Q.スマホ閲覧時、コースカテゴリー名が長いものと短いものが混在するとレイアウト崩れが起きます。対策を教えてください。

コースカテゴリー名が長いもの(複数行にまたがるもの)と短いものが混在する場面において、スマホ閲覧時のアーカイブ画面内カテゴリー表の部分で一部の枠線が切れるという事例がありました。
下記のようにカスタムCSSで個別に調整いただければと思います。

A.カスタムCSSに下記コードを追加することでご対応ください。

下記いずれかのカスタマイズをお試しください。

ダッシュボード左メニュー[外観]→[TCDテーマオプション]→[基本設定]タブ内にあるカスタムCSSに、下記のようなコードを追加します。

1.高さを指定し、余分を非表示に設定する

.course_categories li a{ overflow:hidden; height:15px; }

2.長いコースカテゴリー名(複数行)を省略して表示する設定

.course_categories li a{ overflow:hidden; text-overflow:ellipsis;
white-space:nowrap; }

この記事は役に立ちましたか?

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

同じテーマのカスタマイズ記事