テーマDawnを利用しています。
商品説明欄に商品画像を入れているのですが、スマホで表示すると画像がはみ出してしまいます。
レスポンシブにする方法を教えてください。
Topic summary
Dawnテーマを使用している商品ページで、商品説明欄に挿入した画像がスマホ表示時にはみ出してしまう問題が報告されました。
提案された解決策:
- カスタムCSSを追加することで調整可能
- 追加するCSSコード:
.product__description img { max-width: 100%; } - このコードにより、PC・スマホ両方で画像が説明欄の幅いっぱいに収まるように表示されます
CSS追加手順:
- 管理画面のテーマ → カスタマイズをクリック
- ホームページ → 商品 → デフォルトの商品を選択
- 左メニューの商品情報をクリック
- カスタムCSS欄に上記コードを追加して保存
※既に他のCSSを追加している場合、競合して効果が出ない可能性があることが注意点として挙げられています。画像付きの手順説明も提供されました。
ご質問いただいている、商品説明欄に画像を入れた際スマホで画像がはみ出る件ですが、下記CSSを追加いただくことで調整が可能かと思います。
PC、スマホとも商品説明欄のコンテンツ幅いっぱいに画像が表示されます。
別途CSSを追加いただいている場合は、追加いただいたCSSと競合して効かない場合もございます、その場合はご了承ください。
CSS追加方法1. 管理画面のテーマからカスタマイズボタンクリック
-
上部のホームページ部分から 商品 > デフォルトの商品を選択
-
左メニューの商品情報をクリック
-
カスタムCSSに下部CSSを追加し保存
.product__description img {
max-width: 100%;
}
ご参考まで
(キュー小坂)
1 Like