【クリエイターモード】テンプレートBRothersで、商品説明に入れた画像がはみ出してしまいます。修正方法を教えてください。

デザインテンプレート【BRothers】では商品説明が画面左側のメイン画像の下に表示されるようにデザインされています。
このエリアの横幅が600ピクセルであるため、商品説明に入れた画像などの幅が600ピクセルを超えると、はみ出して表示されてしまいます。

＜表示例＞

編集の際は、 デザインセットのコピーボタンをクリックしてバックアップを保管し、もとに戻せる状態で作業をおこなってください。
→ショップデザインバックアップしてますか？！
 

◆商品説明に貼った画像がはみ出さないようにする

画像の大きさを調整するCSSを追記します。

ショップデザイン / テンプレート選択・編集 / クリエイターモード / 商品詳細
 「CSS」欄の末尾に以下を追記し保存してください。

.item-description-wrap img{
    max-width:100%;
    height:auto;
}

◆商品説明を左カラムから出して幅いっぱいに表示させる

商品説明の位置を変更することで、幅の広い画像の表示が可能です。

ショップデザイン / テンプレート選択・編集 / クリエイターモード / 商品詳細
「HTML」の入力欄内に一度カーソルを置いた状態で、キーボードのCtrlとFキーを同時に押し表示される検索窓に

商品説明

と入力し、キーボードのEnterキーを押して商品説明のHTMLを見つけてください。

<!--商品説明文-->
<{if $item.description}>
    <div class="item-description-wrap">
        <p class="item-description"><{$item.description}></p>
    </div>
<{/if}>
<!--追加商品説明文-->
<{if $item.description2}>
    <div class="item-description-wrap">
        <p class="item-description"><{$item.description2}></p>
    </div>
<{/if}>

このソース（12行）を切り取り、

再度Ctrl＋Fで

追加商品画像

と検索し、追加商品画像のHTMLを見つけてください。

<!--追加商品画像-->

この記述の前の位置に、切り取ったソースを貼り付け、保存してください。