# 商品の説明文の幅を変更したい

**URL:** <https://community.shopify.com/t/topic/343089>\
**Category:** 技術的なQ＆A\
**Tags:** css, html\
**Created:** [July 27, 2024, 2:20am UTC](https://community.shopify.com/t/topic/343089 "2024-07-27T02:20:32Z")\
**Posts on this page:** 3\
**Page:** 1

## AI-generated summary

商品説明文の横幅を「カートに追加」ボタンの幅に揃える方法についての質問です。

**問題点：**
- 説明文が横幅いっぱいに広がってしまう
- 手動で改行して調整していたが、スマホ表示で改行位置がずれる
- DAWNテーマを使用中

**解決策：**
Roy_12が、テーマのコード編集不要でカスタムCSSによる解決方法を提示：

1. ダッシュボード「外観」→「カスタマイズ」を開く
2. 「追加CSS」をクリック
3. 以下のCSSコードを貼り付ける：
```css
.product .product__description {
  max-width: 44rem;
}
```

**結果：**
質問者が解決を確認し、感謝のコメントで終了。画像付きで手順と結果が示されています。

<div class="post-metadata">

**Author:** ![Anonymous\_61092b3fc5e108c0c3057eafc0ae8d89](https://avatars.discourse-cdn.com/v4/letter/a/e36b37/32.png) [@Anonymous\_61092b3fc5e108c0c3057eafc0ae8d89](https://community.shopify.com/u/Anonymous_61092b3fc5e108c0c3057eafc0ae8d89)\
**Post date:** [July 27, 2024, 2:20am UTC](https://community.shopify.com/t/topic/343089/1 "2024-07-27T02:20:32Z")

</div>

商品の説明文を「カートに追加する」の枠の幅に揃えたいのです。

入力するとダラダラと横幅いっぱいまで入るので

 ![あ.gif](https://canada1.discourse-cdn.com/shopifyforum/original/4X/3/b/9/3b9641ce90f7eb2d6f0e796750357dba8a3f169f.gif)

適度なところで改行（エンターで）して揃えていたのですが

フルスクリーンだと綺麗に揃っていますがスマホ用で表示すると改行部分がおかしくなります。

 ![い.gif](https://canada1.discourse-cdn.com/shopifyforum/original/4X/7/a/6/7a6810a151b39d42368dd2871347cfc82ad69ccb.gif)

 ![う.gif](https://canada1.discourse-cdn.com/shopifyforum/original/4X/b/8/4/b84a8cb9c711ad7a482f50bb13a762010cc73762.gif)

改行をしなくても横幅の設定をするところがあるのか？

コードをいじらないといけないのか？

どなたか解決策をご存知の方、教えてください。

ちなみにDAWNを使用しています。コード編集などは分からないです。

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

---

<div class="post-metadata">

**Author:** ![Roy\_12](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/roy_12/32/338531_2.png) [@Roy\_12](https://community.shopify.com/u/Roy_12)\
**Post date:** [July 28, 2024, 4:00am UTC](https://community.shopify.com/t/topic/343089/2 "2024-07-28T04:00:03Z")

</div>

商品の説明文を「カートに追加する」の枠の幅に揃えたいとのことですね！

DAWNを使用されているとのことなので、コードを編集する必要はありません。カスタムCSSで調整できます。

**手順**

1. **テーマのカスタマイザーを開く** テーマのカスタマイザーは、ダッシュボードの「外観」→「カスタマイズ」から開けます。
2. **「追加CSS」をクリック** テーマのカスタマイザーの左側にあるメニューから「追加CSS」をクリックします。
3. **CSSコードを貼り付ける** 下記のCSSコードを「追加CSS」のテキストエリアに貼り付けます。

```markup
.product .product__description {
    max-width: 44rem;
}

```

 ![Untitled.png](https://canada1.discourse-cdn.com/shopifyforum/original/4X/5/8/b/58b28c41757a2ef14e9d61cd9e0353d481072da8.png)

**結果** :

- ![Roy_0-1722139185332.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/e/a/eaa131367d9cd6a9631b28c9314fbe2eaf91eb70.png)

---

<div class="post-metadata">

**Author:** ![Anonymous\_61092b3fc5e108c0c3057eafc0ae8d89](https://avatars.discourse-cdn.com/v4/letter/a/e36b37/32.png) [@Anonymous\_61092b3fc5e108c0c3057eafc0ae8d89](https://community.shopify.com/u/Anonymous_61092b3fc5e108c0c3057eafc0ae8d89)\
**Post date:** [July 28, 2024, 5:17am UTC](https://community.shopify.com/t/topic/343089/3 "2024-07-28T05:17:57Z")

</div>

ロイ様

ご丁寧にありがとうございます！

無事に解決いたしました。

本当に助かりました。