iframeでGoogleMapを固定ページに挿入するとスマホでレスポンシブができない
t151m > iframeでGoogleMapを固定ページに挿入するとスマホでレスポンシブができない @ 2017/4/20 10:24 |
---|
お世話になります。
テーマはbcColorsを使用しております。 題名どおりgooglemapをiframeにて固定ページに記述した場合 スマホ画面にて表示がgooglemapにあわせて崩れてしまいます。 style.ccsには .gmap { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } .gmap iframe{ position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; } を記述しPC画面では正常にレスポンシブします。 解決策等あればご教授頂けないでしょうか。 よろしくお願いいたします。 ■ BaserCMSのバージョン:3.0.7 ■ レンタルサーバー名:さくら ■ スマートURLの利用:ON ■ 利用しているデータベース:SQLite ■ PHPスキル 全くわからな |
goichi > Re: iframeでGoogleMapを固定ページに挿入するとスマホでレスポンシブができない @ 2017/4/21 10:51 |
---|
こんにちは。そのテーマを使っていないのですが、baserCMSというよりHTMLやCSSの問題であるように思います。ブラウザのデバッグモード(開発者モードとも)をつかって、原因を特定できませんか?
(例えば、「Google Chrome デバッグモード 使い方」などで検索すると、沢山の解説ページが出てくると思いますよ) |
katokaisya > Re: iframeでGoogleMapを固定ページに挿入するとスマホでレスポンシブができない @ 2017/4/21 10:53 |
---|
t151mさん こんにちは
引用: スマホ画面にて表示がgooglemapにあわせて崩れてしまいます。 とのことですが、 GoggleMAP読み込みを固定ページ内で行う際に、どんな記述で読み込みをされていますでしょうか? baserCMSの場合、固定ページはソース入力にすればbaserのヘルパーが使用できますので、 まずは、読み込んでいる固定ページのエディターをソース入力に切り替えてください bcColorsの固定ページ内でのGoogleMapの読み込みは、初期データでは
このようになっておりますので、 680px以下の横幅では、画面がはみ出します。 以下のように修正すると、きれいに収まると思います。
|