【CSS】エラーに困る。

f:id:Kawan0116:20210429112827p:plain

本日、記事をスマホで見たとき、横スクロールが出ていました。

「うそんw」

という感じで、はじめは全ての記事でそうなっているのかと思いましたが、どうもこの記事だけらしい。

こやつです。

coool.blue

CSSを書いて表示させたのですが、それを削除すると治りました。

問題のはこれです。また横スクロールが出るかもですが(笑)。

.hatena-module.hatena-module-category ul {
  display: flex;
  justify-content: flex-start;
}

.hatena-module.hatena-module-category li {
  margin-right: 1%;
  border: 1.8px solid #0e48b6;
  border-radius: 5px;
  padding: 4px 8px;
  font-size: .75em;
}

.hatena-module.hatena-module-category li a {
  color: inherit;
}

問題なのは、試しにコンテンツを全て消しても横スクロールが出ます・・・。

原因分からんて(笑)。

この記事だけなのです。全く意味が分からない。

コンテンツがスマホ画面の幅を超えて横スクロールされるのは分かりますが、何もコンテンツがないのに横スクロールが出る・・・。

そもそもhtmlもしくはbodyに問題ありそうですが、チェックしても問題なし。

苦肉の策として、CSSを消しました。これで解決。

原因はCSSのコード表示でした。

今後のことを考えると、ここは絶対にクリアするべき問題。

もし、この記事で問題が出たら、あえて表示させたままにして対応したいと思っています。

なお、preに対して改行させるようにしました。エラーのときもそうしたのですが、ダメでした。

ただ、おまじない的にCSSを残しています。

【追記】

この記事を公開したあとスマホで見ると問題ありませんでした。

おそらく、CSSのコピペの仕方が悪かったのかなと思います。

何はともあれ治って良かった・・・。