カラーミーショップ　問い合わせフォーム　スマホ表示につきまして。

Question

お世話になります。
自社サイトでカラーミーショップを使用しています。
その問い合わせフォームをスマホで開いた際、
左右にブレるのを改善すべくGMOに問い合わせたところ、
全くブレないとの回答しかありませんでした。

しかし手元のスマホではブレが生じます。
解決策があればご教示頂けないでしょうか。###HR######IMG00ba95621d50dea2e30d91953457b67d0.pngIMG0###

Accepted Answer

ECマスターズの田中です。

私から申し上げたのは
margin-right:10px;
全てを削除していただくという意図のため、
現在の状態で結構なのですが、
iPhone11のSafariにて、
それでも改善されないことがわかりました。

お手数ですが、

/* フォームコンテンツ 入力フォーム */
.group_form dd input {

/* フォームコンテンツ テキストフォーム */
.group_form dd textarea {

以上２つの規則に
box-sizing: border-box;
を追加していただき、

/* フォームコンテンツ テキストフォームサイズ調整 */
.group_form_comment {
	padding-right:5px;
}

以上４行をまるごと削除していただきますようお願いします。

これで一般的なブラウザであれば解決するはずですが、
いただいたスクリーンショットのような崩れ方は
別に原因があるのではないかと思います。
私のiPhone11のSafariでも、若干横スクロールするのみであり、
村井よりご案内した画像と同じ見た目となっております。

何か、ページを拡大表示するような特殊な処理はされておりますでしょうか。
また、同じiPhoneXにて、Chromeで同ページをご覧いただくといかがでしょうか。
周りにいる他の方のスマートフォンでも、同じ崩れ方をしますでしょうか。
それぞれ、ご確認いただきますようお願いいたします。

Answer

ECマスターズの村井です。

> しかし手元のスマホではブレが生じます。
> 解決策があればご教示頂けないでしょうか。

私のスマートフォンにて確認したところ、正常に表示されておりました。
https://ec-masters.gyazo.com/9ca464a12d979e9040b24928b1956e4d

念のため、Chromeなど別のブラウザでも同様に表示されるかご確認いただけますでしょうか。

Answer

左右にスワイプしてもブレませんか??
ブラウザを変えてもやはりブレが生じ、
知人のスマホで見てもブレが生じます。
キャッシュの削除も試みたのですが修正されません。
何が原因でしょうか。

Answer

ECマスターズの村井です。

> 左右にスワイプしてもブレませんか??

確認したところ、スワイプすると添付いただいた画像のようにブレました。

明日システム担当より原因を調査してご返答いたしますので、
今しばらくお待ちいただければ幸いです。

Answer

ECマスターズの田中です。

「お問い合わせ内容」用のテキストボックスに設定された
右側の余白が原因で画面幅をはみ出しておりますので、
スタイルシートに含まれる
/* フォームコンテンツ テキストフォーム */
直下、「.group_form dd textarea」への規則に含まれる
margin-right:10px;
の指定を削除していただきますようお願いします。

なお、私のiPhone11では
右側いっぱいにスクロールしても
添付画像までとなっており、
いただいた画像のようなはみ出し方はしておりませんでした。

上記修正いただいても改善されない場合は、
Shujiさんが同ページを閲覧された環境も併せて
ご返信いただきますようお願いします。
（iPhone7のSafari、iPhoneXのLINEアプリ内のブラウザ、など）

Answer

お世話になります。
指定を解除というのは

margin-right:10px;

上記全てを削除すれば良いのでしょうか、
もしくは10px;のみ削除でしょうか。

一応どちらも試してみたのですが
改善されませんでした。

環境はiPhoneX safariです。###HR######IMG0649dc32158a753b668ef3641956e5934.pngIMG0###

Answer

お世話になります。
ご指示通りにしてみましたが
改善されていないようです。

特に画面表示に関して
特殊なことは行っていないと思うのですが。

別の端末ではまだ確認できていませんが、
chromeでも同様です。

Answer

ECマスターズの田中です。

確認したところ、

/* フォームコンテンツ テキストフォーム */
.group_form dd textarea {

にご記載いただいたbox-sizingの左に
全角スペースが記載されており、
エラーが発生しておりましたので、
全角スペースを半角スペースに直していただきますようお願いします。

カラーミーショップ 問い合わせフォーム スマホ表示につきまして。

カラーミーショップ　問い合わせフォーム　スマホ表示につきまして。