Iframeチャットの窓に関して

Question

http://www.marianaocean.work/gokurakuyu/index.html

こちらのIframeの中でチャットを見えるようにしていますが
なぜか左だけ線が出ています。
2個目のチャットはradiusで作っていますが、外枠が出てしまっています。
こちらの調整はどのようにやりますか？

またスマホにした際にWidth100%になっていないような気がしてグラグラと動くのが
気になります。
ご教示お願い致します。

Accepted Answer

ECマスターズの田中です。

> こちらのIframeの中でチャットを見えるようにしていますが
> なぜか左だけ線が出ています。
> 2個目のチャットはradiusで作っていますが、外枠が出てしまっています。

実際のページを確認したところ、
iframeタグ自体のborderがデフォルトのまま残っており、
これが左だけの線および外枠として見えているのかと思います。

まずは、iframe に対するスタイルシート規則に
border: none;
を設定して、枠線を消していただいてから、
さらに枠線の調整が必要かどうかご確認ください。

> またスマホにした際にWidth100%になっていないような気がしてグラグラと動くのが
> 気になります。

私のiPhone8にて確認したところ、
添付したスクリーンショットのように、
１個目のチャットの内容がiframeタグの領域からはみ出て、
２個目のチャットに被ったり、ページ全体の横幅を拡げたりと
表示乱れの原因となっております。

botchat_typed.css に設定された

#bot {
  height: 600px;
  width: 460px;
}

上記規則が原因なのですが、
こちらはPC向けの設定などでしょうか。

特に問題がなければ削除していただければ結構ですが、
スマートフォン用ページ以外に影響が出るようであれば、
どう修正するかを改めて検討する必要がございます。###HR######IMG0b8d686b63ef8fd3ac7e50b75d9fcc05c.pngIMG0######BR###