Technology ホームページ作成

本番環境でスマホでみた時に画像が縦にのびてしまう問題が起きた時の対処

2021-01-19

Github pagesにファイルをアップロードし、実機でみてみたところ、PCの方はなんの問題もなかったが、スマホでみると写真が縦に伸びてしまう問題が発生。

Developer toolでみてもなんの問題もなかったのに、なぜか実機でみると縦に伸びる。

Developer toolでみた時はこちら。


実機でみるとこちら。少し縦に伸びてしまっている。


試してみたこと

色々調べてみると、要因はflexboxにあるらしい。

色々調べると、画像を包む親要素に、「align-items: flex-start;」を入れると良いという記事がいくつか出てきたので試してみた。

stylesheet.cssの、display:flex;の効いてるところに入れてみる。



デザイン的に、PC画面では、写真6枚を二列で表示し、レスポンシブ画面では縦一列に表示しているのだが、PC画面で横一列になってしまった。

「flex-wrap: wrap;」の部分に、「invalid property value」の注意書きが表示されてしまっていた。


試したこと2

先ほどはstylesheetの方に「align-items: flex-start;」を記述してみたが、今度はresponsive.cssの方を書き直してみたらどうなるか?


そしたら無事、反映されるようになった。

-Technology, ホームページ作成