スマホページ　表示崩れ

Question

ページを作りました。
一枚の画像を切って入れていますが、
パソコンではちゃんと表示されますが
スマホで見ると画像を切って入れている間が空いたり、
左右に2個並べるように各50％で指定して入れましたがずれてしまっています。
テーブルに入れたりもしましたが、私の力ではどうしてよいのか直りません。

どうかご教授お願いします！###HR######IMG08efe1706026db0a29868e6c22d290ba6.jpegIMG0###

Answer

ECマスターズの伊藤です。

> スマホで見ると画像を切って入れている間が空いたり、
> 左右に2個並べるように各50％で指定して入れましたがずれてしまっています。
> テーブルに入れたりもしましたが、私の力ではどうしてよいのか直りません。

こちらですが、実際のページを確認したいので、
URLをご連絡いただけますでしょうか。

Answer

https://item.rakuten.co.jp/koff-j/c/0000000108/
のスマホです、お願いします。

Answer

ECマスターズの田中です。

URLをお知らせいただき、ありがとうございます。

スマートフォン用商品説明文の中の画像は、
楽天市場側のCSSによって、
前後に必ず改行が入る（display:block;）仕組みになっています。

> スマホで見ると画像を切って入れている間が空いたり、

タグ直後にさらにタグで改行を入れることで空いておりますので、
直後のタグを削除していただきますようお願いします。

> 左右に2個並べるように各50％で指定して入れましたがずれてしまっています。

テーブルに入れた上で、セル間の余白を0にするといかがでしょうか。
その際、タグの中にさらにタグで入れるため、
開始/終了タグの対応がずれることで崩れやすいページ構造となりますことを
予めお含みおき願います。

たとえば、下記のような構造でタグを組んでいただく形になります。

スマホページ 表示崩れ

スマホページ　表示崩れ