スマホの時に表示が拡大されるのを修正したい

Question

wordpressの記事を投稿していたらスマホの実機で見るときの表示が拡大されたような表示になって
しまいました。
色々試してみたのですが、解決できず困っています。
もし何か解決策がありましたらご教授願います。

https://onlinesalon-mania.com/
・対象箇所
ページ全体のコンテンツ部分
id #main_contentsで囲まれている部分

・症状
・スマホの実機で見ると、コンテンツ部分のみ拡大？のように表示が切れている。
・ヘッダーフッターは問題なくレスポンシブ対応されている
・パソコンのデベロッパーツールで確認すると特に問題なく表示される

試したこと
・ビューポートを<meta name="viewport" content="width=device-width">から<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">に変更
・#main_col　#left_col　のcssを変更、以下の内容を追加

@media screen and (max-width:770px){
#left_col { width: 100% !important ; float:none !important ;  }
#main_col{overflow:visible;}

以上になります。
他に必要な情報がありましたらご連絡お願いします。
すみません。助けて下さい。

Comments

[kuma_kuma_]

フォントの種類やサイズはどうされていますか？

[Jon_do]

質問者さんの状況を再現出来るコード（htmlなど）を質問に追記してください。
追記
urlがあるのを見落としてました。すみません。

[yesma]

フォントサイズは、文章はfont-size: 15pxのように指定しています。
フォントは以下のように指定しています。
body, input, textarea { font-family: "Segoe UI", Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; }

Answer 1

気になったのは single_ranking_sliderの下の<div>タグ

背景指定で画像を表示しているので画像サイズが取れなく不自然な表示になっています。
height: 60vw;　
とか指定してみて下さい。
後フォントは

レスポンシブ対応で
@media screen and (max-width: 700px)
p {
font-size: 15px;
}
文字サイズ大きくされているようですが...

追記
なぜかCSS等構成が変わっているのですが...

<div class="bottom_image" ...> 背景指定で画像を表示しているので画像サイズが取れなく不自然な表示になっています。 ```CSS height: 48vw;　 ``` とか指定してみて下さい。

こんどは
レスポンシブ対応していた

@media screen and (max-width: 700px)
p {
    font-size: 15px;
}

が上書きされて(index.html 395行目)
(意味がなくなって)

#blog_list .excerpt {
    font-size: 14px;
    line-height: 2.2;
}

(style.css?ver=1.4 391行目)
こちらが優先されています。
もし対応されるなら

<style>タグの後にCSSファイルを呼び込まなで下さい。 あとレスポンシブ対応でもCSSは後勝ちです。 よくわからないであれば ```CSS @media screen and (min-width: 901px) {} @media screen and (min-width: 701px) and (max-width:900px) {} @media screen and (max-width: 700px) {} ``` の様にサイズで区切ってください。

Comments

[yesma]

ご確認ありがとうございます。
すみません。 single_ranking_sliderこちらはどこの箇所でしょうか？
ご指示のように single_ranking_slider divでcssを書いてもよろしいでしょうか？

[kuma_kuma_]

質問なんだけど質問者様側でいまこのHPいじってる？
コードが変更になってるんだけど（表示自体も変わっている）

[yesma]

いえ何もさわっていない状態です。
特に何もしていないのですが、、

[kuma_kuma_]

さっき表示したときと表示変わってるんだけど...
指摘位置が変更になっているので再度回答を修正します。

[yesma]

お手数おかけして申し訳ございません。
確認しました。やってみます。

[yesma]

ありがとうございます。
スマホの表示の拡大？される症状が解消されました。
ただ、記事ページに横スクロールする箇所があるのでこちらを原因を調べてみます。

[yesma]

ありがとうございました。
無事に表示崩れが解消できました。
もうどうしていいか、立ちすくんでいましたがご確認いただきましてありがとうございました。