スマホでHPを確認した際の左右の余白を削除する方法

Question

現在WordPressでホームページを制作していて、
テーマはStacker Liteを使っています。
スマホで記事を確認すると左右の余白と文字が半々くらいになってしまっています。

色々検索をして試してみましたが、うまくいきません。
現在はヘッダーに
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
を入れ、
cssの先頭に
＊ {
margin: 0px;
padding: 0px;
}
を入れてみましたがそれでも解決せず。

どの部分を修正すればいいかなど教えていただけると有り難いです。
何日も悩んでいるのですが解決できなかったので、
お力添えお願いします。

かなりの初心者なので、わかりやすく教えていただけると助かります。

Comments

[m.ts10806]

質問編集画面タイトル横にある「初心者アイコン」をご活用ください。「初心者」と質問で書くよりも伝わりますし、質問一覧に表示されるのでわかりやすくなります。

[m.ts10806]

また、実際の画面のスクリーンショットなど提示されたほうが良いかもしれません。そのテーマがデフォルトでスマートフォン対応されているものか、自身でスマートフォン対応を入れたものかにもよります。それによって提示された情報だけでは回答は得られないかもしれません。

[yoshinavi]

＞スマホで記事を確認すると左右の余白と文字が半々くらいになってしまっています。 　→　「PCでは丁度良い感じの余白だが、スマホで見ると余白が大きすぎる」との解釈で良いのでしょうか？　いずれにしてもHTML・CSSのコードがないと検証できません。全部ではなく、問題個所だけで良いのでHTML・CSS（PC・スマホ）のコードを提示されると、回答を得やすくなると思います。全称セレクタのリセットは便利ですが、提示の部分だけでは「弱い」ので、他のCSSが原因と思われます。

Answer 1

本来ならサイトのURLを教えてくださった方が、みなさん確実な回答ができるはずです。

そのサイト固有の、もしくはそのページ固有の設定などもあり得ますし、問題はCSSの記述なので、その記述がどこに書かれているのか、他のプラグインや機能が吐き出しているCSSが絡んでいるのかどうか、ご自身で追加されたCSSがあるかどうかなど、実際のサイトを見ないと何とも言えないことも多いので。

とりあえず「Stacker Lite」というテーマを使っていて、こちらのデモサイトと同じ状態だと仮定しますと・・・

スマホ表示時はデフォルトで記事領域が幅60%で表示される指定が入っています。これが「狭い」と感じられているということであれば、CSSに

#content { width: 100%; }

を追加してみてください。もちろん数値は100%以外のお好みの数値で構いません。

これでも解決しないようであれば、恐らくそちらのサイト固有の問題があると思いますので、URLを教えていただくのが一番確実化と思われます。

また他の方も書かれているとおり、

＊ { 
margin: 0px; 
padding: 0px; 
}

は効果ないですし、全称セレクタ（*）は若干ですがブラウザに負荷をかけて表示速度に悪影響を及ぼすとも言われていますので、削除しておいた方がいいと思います。