スマホ表示崩れ

Question

いつもお世話になっております。
スマホでの表示でハマってしまっており、アドバイスいただければ幸いです。

https://item.rakuten.co.jp/beauty-phoenix/pemaangel-soap/?force-site=ipn
（現在スマホのみ改修が進んでおり、PCとクリエイティブが違います）

１：スマホ（iPhone）ブラウザーでみると問題なく表示できているのですが、
　　アプリで見るとQ&Aの後半の文字にその次に表示している商品サムネイルが被って表示が崩れてしまいます。

２：スマホサイトで端末を横にすると同じようなところ（被り方がもっと酷くなります）がうまく表示できていません。

ちなみにPCブラウザーでスマホ表示して横幅を広くするとやはり崩れます。

何かこの辺りで書き間違えている気がするのですがわかりません。
どうぞ宜しくお願い致します。

Answer

ECマスターズの田中です。

Q&Aまでの内容が記載されている
https://www.rakuten.ne.jp/gold/beauty-phoenix/bp/sp_p_pema/sp_p_soap_insert.html
上記HTMLを埋め込むタグの高さが固定値で指定されておりましたため、
縦を横にしてテキストの行数が短くなる、スマホ用の見た目で文字が大きくなるなど、
HTMLファイルの内容の高さが変化するにつれ、
仰るような症状が発生してしまいます。

スマホブラウザーで閲覧した時の崩れは
https://forum.ec-masters.net/post_view.php?id=5740
上記URLの返信にて案内している「iframeResizer」プラグインを
導入していただくことで解決できますが、

アプリ内の表示方法は通常のブラウザとは異なるため、
アプリ上での見た目は解決できない可能性があることを予めお含みおきください。

なお、同じ内容で二つご質問をいただいておりますので、
もう片方は削除させていただいております。

Answer

田中さま

アドバイスありがとうございます。
トライしてみます！