chromeのデベロッパーツールではすべて表示されているが、iPhoneの実機だとtableの右端が切れてしまっています。修正したいのですが、どこが原因なのかがわからずお手上げ状態です。
#実現したいこと
スマホ(レスポンシブ)表示した時にもテーブルをすべて表示させたい
#発生している問題
chromeのデベロッパーツールではすべて表示されているが、iPhoneの実機だとtableの右端が切れてしまう
WordPressのコンタクトフォーム7にtableタグを使用してフォームを作成しています。
#該当のソースコード
該当ページ(テストページ)
table { border-top: 1px solid #e5e5e5; border-left: 1px solid #e5e5e5; } table th, table td { padding: 10px; border-right: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; } @media screen and (max-width: 736px){ .table-responsive{ width: 99%; } .table-responsive th, .table-responsive td { display: block; width: 99%; padding: 10px 5px 10px 5px; } }
#試したこと・確認したこと
viewportは正しく設定されている
<meta name="viewport" content="width=device-width,initial-scale=1">
tableの親要素に対してはみ出していない。⇒paddingやborderを含めてもはみ出してない
#環境
WordPress 5.3.2
contactform7 バージョン 5.1.6
chrome windows
iPhone7とiPhoneX
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/12/27 05:02