表(table)や囲み枠をスマホで確認してみると、テーブルが異常にはみ出していたり、囲み枠がはみ出していたりと、PC上では完璧!と思って公開したのにガッカリする事がありますよね。
おまけにスマホでスクロールすると、画面が右へ左へゆらゆら~ゆらゆら~と横揺れを起こしていて、「下方向にスクロールしたいのに進まない!」かなりイライラします (-_-;)
simplicity2では、初期設定で投稿記事の本文を書く部分は、幅680pxに設定されているということで、テーブル幅が680pxを超えなければ良い話しなのですが…
これが結構難易度高い!いつの間にか超えてます…
かなり時間をかけて作ったページだったので、直す気力もなかったのですけど、スマホユーザー様にイライラさせては申し訳ない!
レスポンシブでスマホ表示の「はみだし・横揺れ」を防止
ということで、とてもわかりやすくレスポンシブ対応させるCSSが紹介さているサイトを発見! ヤッター
同じお悩みを持たれている方は必見です!
- 子テーマのスタイルシート (style.css)へ
/* はみだし・横揺れ対策 */ div, img { max-width: 100%; /* 画像キャプション幅 */ height: auto; } iframe { max-width: 100%; /* iframe幅 */ } table { width: 100%; /* テーブル幅 */ }
追記:
テーブルは上記コードで解決したのですが、今度は囲み枠で横揺れが発生 (泣)
こういう囲み枠
どうやら囲み枠の幅をwidth 90%に指定していたのが原因らしく width 85%に直したら解決したので一安心。
上記コードで解決しない場合「おかしいな?」と感じたら width や padding なども確認してみるとよいですね。
関連記事
Simplicity2 コピペで簡単カスタマイズ一覧【まとめ】
初心者の私にもできるSimplicityの使い方やコピペするだけの簡単CSSカスタマイズ方法一覧【まとめ記事】です。