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

解決済
ken01
観光客
9 1 1

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

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

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

 

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

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

 

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

 

0 件の「いいね!」
_osamu_iwasaki_
探検家
61 16 96

成功

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;
  }
}

スクリーンショット 2021-02-10 15.35.53.png

ken01
観光客
9 1 1

探検家さま

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

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

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

0 件の「いいね!」