Xeory base | スマホ表示時にアイキャッチ画像と本文が重なる問題の解決法

このブログはWordpressを使って作成していますが、テーマは「Xeory Base」を使わせていただいています。

このテーマはSEO対策はもちろん、シンプルかつ洗練されたデザインも備えており、申し分なくオススメできるテーマです！
テーマは以下からダウンロードしていただけます！（なんと嬉しい無料！）

Xeory Baseをダウンロード

さて、このテーマを使っていて一点困った事がありまして、このテーマはレスポンシブデザインなのですが、スマホで表示した際に、アイキャッチ画像にブログ本文のテキストが重なってしまいました。

今回はその解決方法を紹介してまいります！

こんな感じです。

ここは僕がカスタマイズ過程でいじっていない箇所なので、同じトラブルで困っている人がいたらと改善方法を今回ポストします！

原因のタグはどこに

cssの編集で問題は解決されました！

この部分のheightに215pxが設定されているので、その範囲（215px）以降の文章が重なっていた様です。
clearやfloatを試みましたが改善されず、heightを編集する事で解決されました。

大変満足です。

編集方法

ワードプレスの管理画面のから、外観→テーマの編集→style.cssの欄を編集します。

僕は検索でpost-loop-wrapで探したのですが、検索結果が多いので、「215」での検索をオススメします！（heightの215px部分です）
このテンプレートで215pxはここだけで使われていましたので。（2017年9月現在）

そこで登場する、height部分の215pxを

この様にheight値をautoに変更します。

いざ変更したら改善されます！

もし同じ現象が現れた方は是非試して見てください！