ページのレイアウトがずれる

Question

ＰＣのページのレイアウトが大きくずれます。

https://item.rakuten.co.jp/mathilda/10000928/?s-id=rk_shop_pc_rnkInShop

どの様に対処したらよろしいでしょうか。

Answer

ECマスターズの田辺です。

レイアウトが崩れている大きな原因は、
項目選択肢別在庫とリニューアルした楽天の購入ボタンの大きさでした。

この２つの大きさによって
ページの内容全体が横に広がってしまい、
背景の線からはみ出してしまっております。

その広がりを抑えるために、
まずは項目選択肢別在庫の名前の変更をご検討いただけますでしょうか。

例えば、項目選択肢別在庫の横軸にあるサイズ表記には
XS・S・M・Lだけの表示にして
対象年齢は商品説明文などの別の場所に説明書きをするなどで
幅を狭めることが可能です。

項目選択肢別在庫の表を狭めることで
内容の広がりを抑えることができますが、
それでも楽天の購入ボタンが大きくリニューアルした影響で
背景の中には入りきりません。

そのため、
現在線内を1000px程度の幅で用意している背景を消す
又は線内の幅を広くした背景を用意していただく必要がございます。

このような楽天側のリニューアルや、
商品によってコンテンツの中身が変わることから、
決められた幅を持つ背景を使用していると再度修正が
必要になるかもしれないことをお含みおきくださいませ。


また、今回質問していただいた件とは別になりますが、
販売説明文に書かれた
" width="550" />
という記述がページに反映されておりますので
そちらも削除していただきますようお願いいたします。