【クリエイターモード】テンプレートBaycrossのスマホ表示でヘッダーのお知らせの表示を調節したいです。方法を教えてください。 – makeshop よくある質問

テンプレート【Baycross】ではお知らせタイトルが長い場合には上記の表示になるため、CSSの追記にて調節が可能です。
＜フォントサイズの調節＞、＜テキスト省略表示＞、＜非表示＞のいずれかをお試しください。

＜フォントサイズの調節＞

ショップデザイン / テンプレート選択・編集 / クリエイターモード / 全ページ共通
「CSS」欄　こちらの末尾に下記を追記後、保存してください。

追記例）

@media screen and (max-width: 768px) {
 ul.header-news-list li a{
   font-size: 9px;
 }
}

フォントサイズはショップ様のお好みで変更してください。

フォントサイズ変更後表示例）

＜テキスト省略表示＞

一行のみ表示し、はみ出したお知らせの箇所を省略する場合は
下記を追記後、保存してください。

追記例）

@media screen and (max-width: 768px) {
 ul.header-news-list li a {
   width: 350px;
   display: block;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
}

テキスト省略表示例）

＜非表示＞

スマホ表示時にお知らせの部分を非表示にしたい場合は、
下記を追記後、保存してください。

追記例）

@media screen and (max-width: 768px) {
 ul.header-news-list li a {
  display:none;
 }
}

非表示例）

関連記事