外部チャット内の表示崩れ

Question

http://www.marianaocean.work/demo/index.html

こちらのページですが
チャットに問いかけをしてみると、なぜか左よりになっています。
なぜこのようなことが起きるのでしょうか

フロートなどの問題かなと感じるのですがどうも修正できません。

CSSの問題か、プログラミングの問題か。
教えていただけると幸いです。

Answer

ECマスターズの田中です。

左寄りになる部分は、
添付画像赤枠の、返答の部分でよろしいでしょうか。

でしたら、類似のチャットシステムと同様、
プログラム上左寄りになる仕様であると思います。

もし、返答部分以外の部分が左寄りになる場合は
改めてご返答ください。###HR######IMG02672000f8a6f5bd94a2b6b05f570bfa2.pngIMG0######BR###

Answer

http://www.marianaocean.work/demo/index.html

こちらのページ上部にあるチャットですが
PC版だと横のborder線がでないのと

SP版だと横がwidth100％ではないので
ページの表示崩れがあります。

この場合はどのように指定すれば、うまく作動しますか

教えていただけると幸いです。

Answer

ECマスターズの塚本です。

aloha_odenさんからいただいたご質問ですが、
担当が本日休みをとっておりまして回答が明日になります。

お時間いただき大変ご迷惑おかけしますが、
今しばらくお待ちいただければと思います。

どうぞよろしくお願いいたします。

Answer

ECマスターズの田中です。

> PC版だと横のborder線がでない

とのことですが、
私にて確認したところ、添付画像の通り、
左右ともに表示されているようです。
どのような環境でご確認いただいておりますでしょうか。
（Windows 10上のChrome、Mac上のSafari、iPad上のSafari、など）

> SP版だと横がwidth100％ではないので
> ページの表示崩れがあります。

スタイルシートを確認したところ、
横幅96%に設定されているため、
右側に若干空白ができてしまう、ということですね。

その場合は、iframeに設定されている
width: 96%;
を、
width: 100%;
box-sizing: border-box;
以上2行にご変更の上、表示をご確認いただけますでしょうか。
2行目の指定で、枠線の太さも100%の中に含んで計算するようになるので、
左右の枠線を画面内に収めることができます。