スマホサイトでよく崩れるアレ

「スマホ画面の横幅375px」に対し、要素が600pxとか。

いろんな原因が考えられますが、たいていは画像が原因ですね。

今回は、mapのiframeが原因で、レイアウトが崩れています。

iframeを埋め込むと、そこに「width=”600″ height=”400″」とか指定してあるのでそこを触ることはできません。

で、どうするか。

iframe {
  width: 100%;
}

これで解決しました。