スマホ時のthの幅が記事術した通りにならないときは下記が必要。
textareaの幅を設定する。
(独自ファイルcommon.css)
#mailformpro textarea
{ width: 80%;
margin-right: auto;
margin-left: auto;}
#form-container th {vertical-align: top;
width:30%;}
#form-container td {vertical-align: top;
}
htmlのフォーム
textareのsizeを30以上にするとスマホでははみだしてしまい、影響でthの幅も小さくなるから size=”30″ にしておく。
スマホ用のCSSに下記記述しても優先されないので直接mailformproのファイルの編集する必要がある。
mailformpro/configs/config.jsの
‘SizeAjustPx’:6, を
‘SizeAjustPx’:null, に変更
確認用画面の設定
mailformpro/config.cgi のレスポンシブ機能はコメントオフにしておく。オンにすると確認画面でスマホは幅は100％以上になってしまう。また、html側ではtextareaが小っちゃくなる。
確認画面用の為にスマホ幅オーバーしないように
mfp.statics/css/confirm.overlay.css の
div#mfp_overlay_inner
{ background-color: #FFF;
padding: 15px;
margin: 0px auto;
border-radius: 5px;
box-shadow: 0px 0px 10px #000;
/*width: 640px;*/ コメントアウトしておく
width: 100%; スマホ用にはみ出さないように
max-width:640px;} ＰＣ＆タブレット用にmax-widthを設定
mfp.statics/css/confirm.css の
table#mfp_confirm_table tr th
{ white-space: nowrap;
/* width: 200px;*/ コメントアウトする
width: 30%;} スマホ用にはみ出さないように
table#mfp_confirm_table tr td
{ line-height: 1.5em;
word-break: break-all;
width: 70%;} スマホ用にはみ出さないように