FROM CACHE - jp_header

商品説明欄の画像のスマホでのはみ出しを解決したい

商品説明欄の画像のスマホでのはみ出しを解決したい

nakata1
訪問者
1 0 0

テーマDawnを利用しています。

 

商品説明欄に商品画像を入れているのですが、スマホで表示すると画像がはみ出してしまいます。

レスポンシブにする方法を教えてください。

1件の返信1

Qcoltd
Shopify Partner
1062 436 430

ご質問いただいている、商品説明欄に画像を入れた際スマホで画像がはみ出る件ですが、下記CSSを追加いただくことで調整が可能かと思います。

PC、スマホとも商品説明欄のコンテンツ幅いっぱいに画像が表示されます。

 

別途CSSを追加いただいている場合は、追加いただいたCSSと競合して効かない場合もございます、その場合はご了承ください。

 

CSS追加方法

  1. 管理画面のテーマからカスタマイズボタンクリック
  2. 上部のホームページ部分から 商品 > デフォルトの商品を選択
  3. 左メニューの商品情報をクリック
    Qcoltd_0-1690510443056.png
  4. カスタムCSSに下部CSSを追加し保存
    Qcoltd_1-1690510442558.png

     

 

.product__description img {
  max-width: 100%;
}

 

 

ご参考まで
(キュー小坂)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/