flexboxでカラム配置したsvgがiphoneで見るとPCでは生まれない余白が生まれてしまう。

Question

前提

ワードプレスにオリジナルテーマとしてアップしたLPです。

当方、初心者のためSVGでパーツを作成してそのまま

display: flex;
flex-direction: column;

を活用してSVGをただ縦に並べてランディングページを作成しています。

windows、クロームのデベロッパーツールで
スマホサイズで確認しても問題はなかったのですが

実機のスマホで見たらSVGの上下に余白が大きく生まれてしまいました…
確認したのはiphone8、ブラウザはchromeとsafariの両方で意図しない大きな余白が
できてしまいます。

サイトは以下です。
スマホ閲覧時に問題の起きているサイト

実現したいこと

周りに相談できる方もおらず、制作もかなり進んでいる状態で
何が原因かの切り分けも難しく…
思い当たる原因でも応急処置でも構いませんので
お力をお借りできればと思います。

• このsvgの周りの余白をなくすためのCSSの設定などがあればご教授いただきたいです。
• クロームのデベロッパーツールでスマホの実機と同じように確認する方法があればご教授いただきたいです。

非常に初歩的な質問、そしてぐちゃぐちゃなcssで
いろんな要因が絡んでしまっているかもしれません…
なにとぞヒントだけでもいただけましたら幸いです。
よろしくお願いいたします！

Answer 1

スマホだけじゃなくsafariで発生してますね。
imgに
width:100%;とheight:auto;
つけるとどうですか？

Comments

[yorozuya-marke]

直接 img に　width:100%;　height:auto;を指定したら一撃で解決しました！
ありがとうございます！

自分で探していたら解決できそうになかったので非常に助かりました！
ありがとうございました！！！