Как сделать отзывчивую карту Google в Zurb Foundation

Я попытался использовать zurb foundation 3. Но у вас есть некоторые проблемы с картами google. Хотя я использую карты Google, колонки не хотели быть отзывчивыми.Как сделать отзывчивую карту Google в Zurb Foundation

<div class="row"> 
<div class="six columns">short description</div> 
<div class="six columns"><iframe>GOOGLE MAPS CODE</iframe></div> 
</div>

Любой может мне помочь, пожалуйста.

Спасибо

источник

2013-04-17 user2272831

В Zurb f6 - используйте отзывчивую вставку: http://foundation.zurb.com/sites/docs/responsive-embed.html – iamrobert

Вам нужно будет приложить карту в элемент с идентификатором map_canvas.

<div class="row"> 
    <div class="six columns">short description</div> 
    <div class="six columns"> 
     <div id="map_canvas" ><iframe>GOOGLE MAPS CODE</iframe></div> 
    </div> 
</div>

источник

2013-04-17 08:48:23

Итак, нам нужно вручную создать медиа-запрос, правильно ??? – user2272831

Нет, он встроен в F3. Если вы пойдете и зайдите в 'foundation.css', вы найдете этот класс в нескольких местах. –

yeaps, я нашел код [#map_canvas embed {max-width: none; }], но ваше предложение не сработало. ??? – user2272831

Я использовал карты Google с Zurb Foundation и работал для меня. и я не использовал iframes.

<div id="map_canvas" class="six columns" style="height: 800px"></div> 

<div class="six columns" style="height: 800px"></div>

источник

2013-04-21 18:40:34

но это не сработало для меня, размер такой же не отзывчив. Могу ли я посмотреть ваш сайт, который использует ваш метод? Спасибо – user2272831

попробовать окружив его

<div class="flex-video"> </div>

http://foundation.zurb.com/docs/components/flex-video.html

Если вы встраивание видео с YouTube, Vimeo или другой сайт, который использует IFrame, встраивать или> элементы объекта, вы можете обернуть свое видео в div.flex-video ## Heading ##, чтобы создать внутреннее соотношение, которое> будет правильно масштабировать ваше видео на любом устройстве.

источник

2013-08-21 03:10:15

Это решение также хорошо работает при использовании без iframe – jdiaz

это должен быть принятый ответ! –

Класс «Flex Video» - это лучший способ сделать это, хотя он добавляет основную прокладку к нижней части div. Так что шесть из них полдюжины.

источник

2013-12-07 23:03:53 Serafin

Просто добавьте стиль = "max-width: 100%;" к вашему iframe-коду. Пока iframe находится внутри одного из столбцов Foundation, он будет масштабироваться, чтобы соответствовать. Обратите внимание, что это было протестировано с Foundation 3, а не с 4 или 5. Однако оно должно работать и для тех.

источник

2013-12-10 19:25:37 edwardr

Проблема часто, что процент не работает, когда я исправил от

<div id="map_canvas" style="height: 40%;"></div>

<div id="map_canvas" style="height: 400px;"></div>

Он работал отлично.

источник

2016-02-17 19:59:54 Bassie

Как сделать отзывчивую карту Google в Zurb Foundation

ответ

Смежные вопросы