スマホで表示した時の横幅をフルにしたいのですが、出来なくて困っています。

wordpressで作成したウェブサイトです。

スマホで表示した時の横幅をフルにしたいのですが出来ません。

試したことは、

/* Smartphones | <480px */
@media only screen and (max-width: 30em) {

#wrap, .header-image {
		padding: 1em 1em 0;
	}

これを、

#wrap, .header-image {
		padding: 1em 0 0;
	}

に変更しました。

上記の変更でmacbookの画面上では、

から、

に変化しました。

しかしスマホの画面では、

このまま変化しませんでした。

試したスマホはiphone7 plusとiphone SEです。

ブラウザはgoogle chromeのシークレットモードを使用しました。

現在は、

#wrap, .header-image {
		padding: 1em 0 0;

にしてあります。

スマホでも横幅をフルサイズで表示する方法がわかる方の助言が頂きたいです。

サイトURLは、

https://tabijyoho.net/

です。

よろしくお願い致します。

yoshinavi

2019/07/03 10:45

padding（左右）を0にして公開すると、実機で確認出来る人が出てくるかと思います。

kubokubo86

2019/07/03 11:43

左右のpaddingを０にしました。ご指摘ありがとうございます。

mepon

2019/07/03 12:05

詳細度の問題かメディアクエリの問題か切り分けるために !important使ってみてはいかがですか？これで正しく表示されるのであればただセレクター詳細度で負けてるだけですし

kubokubo86

2019/07/03 12:30

コメントありがとうございます。 !importantをつけてみましたが、変わりませんでした。

mepon

2019/07/03 12:42

という事はメディアクエリが効いてない可能性があるということですよね ①chromeで見たところindex内でSyntaxErrorが出てるような気がするのですがこれは問題ありませんか？ ②メディアクエリはしっかり閉じられていますか？ ③可能であればで構いませんが#wrapに対して、background-color:red;などつけて他のCSSが適用されるかも見てみるとよいと思います。このCSSだと今問題になってる埋まらない部分が赤くなります。

kubokubo86

2019/07/03 12:59

返信ありがとうございます。 background-color:red;を試しました。 macbookのgoogle chromeのデベロッパーツールでは余白の部分が赤くなりました。しかし、スマホの画面に変化はありませんでした。申し訳ないですが、SyntaxErrorとメディアクエリについては、私はあまり知識がないのでよく分かりません。今から調べてみます。

kubokubo86

2019/07/03 13:13

横幅については改善されませんが、SyntaxErrorは修正できました。どうもありがとうございます。

mepon

2019/07/03 13:32

確認ありがとうございます。 SyntaxErrorは解消されたとの事ですね。メディアクエリの閉じというのは @media only screen and (max-width: 30em) { #wrap, .header-image { padding: 1em 1em 0; } }←これのことです@mediaに対する閉じタグ私はmacを所持していないので使ったことはないのですが Webインスペクタで実機に効いてるcssを確認できるみたいなのでこれでどのcssが適用されてるのか確認してみるのも手ですね。参考URL：https://www.tam-tam.co.jp/tipsnote/html_css/post12114.html

yoshinavi

2019/07/03 14:35

chromeのデベロッパーツールで見たところ、「padding: 1em 1em 0;」になっていました。「padding: 1em 0 0;」になっていないので、キチンと更新されていないだけではないのでしょうか？確認してみてください。

kubokubo86

2019/07/03 21:53

meponさん、yoshinaviさん、コメントありがとうございます。メディアクリエについては問題ありませんでした。私がgoogle chromeのデベロッパーツールで見ると、「padding: 1em 0 0;」になっています。この質問の本文に添付した画像でも確認できると思います。サーバーのstyle.cssファイルを直接確認しましたが、「padding: 1em 0 0;」になっていました。しかし、macにiphoneを繋いでsafariのWebインスペクタで確認すると、「padding: 1em 1em 0;」になっていました。

mepon

2019/07/04 00:44

>サーバーのstyle.cssファイルを直接確認しましたが、そもそもstyle.cssを読み込んでいないと思います。style.cssが読み込まれているならデベロッパーツールで確認した時に、style.cssに記載されたcssである事が確認できますが、現状index内に記載されてるcss読み込んでると思うので。 WordPressについてはあまり詳しくないですが過去に回答した事あるのでこちらを参照して調整してみていただけますか？ https://teratail.com/questions/197479

kubokubo86

2019/07/04 01:00

様々なご助言を頂き、meponさん、yoshinaviさんにはとても感謝しています。原因は分かりませんが、症状が改善し、スマホでも横幅いっぱいで表示されるようになりました。ご親切に回答して頂き、本当にありがとうございました。