パソコンとスマホで表示する画像のサイズのコード編集

[ken01]

セッション編集で設定したロゴ画像のサイズは、パソコンで表示される場合、サイズはちょうどいいですが、

スマホ画面に切り替えると、ロゴ画像のサイズが大きくてヘッダー部分のバランスが崩れてしまいます。

やりたいこと：スマホ表示の場合、ロゴ画像のサイズを少し小さくしたいです。

現在使用しているdebutテーマでは、スマホ向けの画像設定ができないため、コード編集から修正になるかと思います。

具体的にどの部分のコードを編集したら良いか、ご教示頂けますでしょうか？

よろしくお願いいたします。

[_osamu_iwasaki_ · Accepted solution]

header.liquid の中にロゴ画像を表示する imgタグ がありますが、
下記のインラインスタイルを削除して、変わりにclass名を付け、cssのメディアクエリで指定サイズを書いてあげれば良いと思います。

style="max-width: {{ section.settings.logo_max_width }}px;"
↓
class="logo_image"

▼CSS
/* PC */
.logo_image {
  max-width: 500px;
}
/* SP */
@media screen and (max-width:480px) { 
  .logo_image {
    max-width: 250px;
  }
}

[ken01]

探検家さま

ご丁寧に説明していただきありがとうございます。

問題点は解決いたしました。

よろしくお願いいたします。