スマホで見た時に特定ページだけ画面が横ブレする【Overflow】

Cocoonのカルーセルにドットを表示させるカスタマイズをしてから、そのページをスマホで見た時だけ画面がグラグラと横ブレする症状が発生しました。

その横ブレを直そうとしていたら今度はまたドットが表示できなくなった話は後に触れますが、そもそもページが横ブレする理由と改善方法を纏めてみました。

画面が横ブレしてしまう原因

お察しの通り、画面サイズに収まらずはみ出している要素があるから横にブレる訳ですが、多くの要素は画面サイズに合わせて拡大・縮小など自動で調整されます。

自動と言うと語弊があるかもしれませんが、WordPressやテーマ側で制御してくれています。

私みたいに全体ではなくポイントだけ見てカスタマイズを続けていると、この様な予期せぬ事態にぶち当たります。

今回症状が発生しているのはトップページだけなので、スマホのトップページにだけ表示させている要素＝カルーセル(スライドショー)だと仮定して調査を進めました。

結論から言うと、疑わしきセレクタ[slider]の中にプロパティ[overflow:hidden;]を追加しただけで改善しました。

/**カルーセル**/
.slider {
  overflow: hidden;
}

画面サイズからはみ出した要素をどの様に処理するかを指定するプロパティです。

{hidden}＝はみ出した部分は表示しないという記述です。その他の主なオプションは以下のとおり。

overflow の主な値

※いつもお世話になっているHTMLクイックリファレンスさんを参考にしました

横ブレが直ってホッとしたのも束の間、カルーセルの下にあったslickのドットが消えていました。overflowを追加してから消えたので、そもそもドットの位置を正しく指定できていなかった(はみ出ていた)という事になります。

今までは画面外にはみ出ていたドットがoverflowのデフォルト[visible]のおかげで上手いこと表示されていたという。

今回のケースは横ブレさえしなければ良いので、細かく指定できるコードは無いかと探して見つけたのが[overflow-x / overflow-y]。縦と横をそれぞれ別々に指定できるという。

ドットは縦にはみ出している → では縦のはみ出しはOKで横だけ非表示に指定{overflow-y: hidden;}すれば直ると思って試してみましたが、確かに横ブレはしないもののドットは表示されませんでした。

調べたところ、overflowのxとyは連動性があるため、必ずしも私が思っている様な独立した動きはしない様です。

全体感を把握せずにカスタマイズしてきたので、不十分なカスタマイズを更に不十分なカスタマイズで補う悪循環。そもそもベースとなっているセレクタ[slick]全体のサイズを広げて、そのボックス内にドットを表示させる事にしました。恐らく基本的な事なんだろうと思います。

赤枠が全体として、paddingとmarginの位置

追加したコード

/*slick ドット*/
.slick-dotted.slick-slider {
  margin-bottom: 10px; 
  padding-bottom: 31px;
}

修正したコード

.slick-dots2 {
  bottom: 0px;
}

{bottom: 0px;}に修正して全て解決しました。

既存のカスタマイズ方法が間違っていた訳ではありませんが、こういった事が起こり得るという事は認識しなければなりません。※いや間違ってました(笑)

やはりカスタマイズはコピペだけに頼らず、探究心を持ってチャレンジし続けなければならないなと感じました。

でもまずはコピペっすよね(笑)。世の中もそういう流れが多いです。なかなかパイオニアにはなれません。そこからオリジナリティーを求める事で、新しいものが生まれると思います。みたいな。