# カスタムliquidで商品ページに追加したエリアでの画像レスポンシブ対応

**URL:** <https://community.shopify.com/t/liquid/349544>\
**Category:** 技術的なQ＆A\
**Tags:** css, html\
**Created:** [August 17, 2024, 4:48pm UTC](https://community.shopify.com/t/liquid/349544 "2024-08-17T16:48:09Z")\
**Posts on this page:** 1\
**Page:** 1

## AI-generated summary

商品ページのカスタムliquidで商品詳細エリアを全幅表示に変更したところ、画像がスマホでレスポンシブ対応せずにはみ出す問題が発生しています。

**現状:**
- 商品詳細を商品画像の右側から下部の全幅表示に移動
- テキストはモバイル幅に合わせて改行されるが、画像のみがはみ出す
- Dawnテーマを使用

**追加されたコード:**
```html
<div class="page-width">
<h2>DESCRIPTION</h2>
{{ product.description }}
</div>
```

解決方法を求めている状態で、まだ回答は投稿されていません。

<div class="post-metadata">

**Author:** ![sh33](https://avatars.discourse-cdn.com/v4/letter/s/f1d935/32.png) [@sh33](https://community.shopify.com/u/sh33)\
**Post date:** [August 17, 2024, 4:48pm UTC](https://community.shopify.com/t/liquid/349544/1 "2024-08-17T16:48:09Z")

</div>

商品ページで、商品詳細が商品画像の右側では小さすぎるため、カスタムliquidに以下のコードを追加し、下部に全幅で入るように追加しましたが、画像がスマホでレスポンシブにならずはみ出してしまいます。文章はモバイルの幅に合わせて改行されていますが画像だけが大きいままです。dawnテーマです。

解決方法がありましたらお願い致します。

## DESCRIPTION
{{ product.description }}