Próbowałem użyć fundacji zurb 3. Mam jednak problem z mapami google. Podczas gdy korzystam z map google, kolumny nie chciały być responsywne.Jak zrobić responsywną Mapę Google w Fundacji Zurb
<div class="row">
<div class="six columns">short description</div>
<div class="six columns"><iframe>GOOGLE MAPS CODE</iframe></div>
</div>
Każdy może mi pomóc, proszę.
Dziękuję
Musisz załączyć mapę do elementu o identyfikatorze map_canvas.
tak, musimy utworzyć ręcznie zapytania mediów, prawda ??? – user2272831
Nie, jest wbudowany w F3. Jeśli przejdziesz do 'foundation.css', znajdziesz tę klasę w kilku miejscach. –
yeaps, znalazłem kod [#map_canvas embed {max-width: none; }], ale Twoja sugestia nie działa. ??? – user2272831
Użyłem mapy google z Fundacją Zurb i to działało dla mnie. i nie używałem elementów iframe.
<div id="map_canvas" class="six columns" style="height: 800px"></div>
<div class="six columns" style="height: 800px"></div>
ale to nie zadziałało, rozmiar jest taki sam, nie odpowiada. Czy mogę wyglądać na Twojej stronie internetowej korzystającej z powyższej metody? Dzięki – user2272831
spróbować owijając go w
<div class="flex-video"> </div>
http://foundation.zurb.com/docs/components/flex-video.html
Jeśli osadzanie wideo z YouTube, Vimeo lub innej stronie, która używa iframe, embed lub> elementy obiektu, możesz zawinąć swój film w div.flex-video ## Heading ##, aby stworzyć własny współczynnik, który odpowiednio skaluje twój film na dowolnym urządzeniu.
To rozwiązanie działa również dobrze, gdy jest używane bez elementów iframe – jdiaz
, to powinna być zaakceptowana odpowiedź! –
Do tej pory klasa "Flex Video" jest najlepszym sposobem na zrobienie tego, mimo że dodaje dużą dopełnienie na dole elementu div. Więc jest sześć z pół tuzina innych.
Po prostu dodaj styl = "maks. Szerokość: 100%;" do Twojego kodu iframe. Tak długo, jak element iframe znajduje się wewnątrz jednej z kolumn Fundacji, będzie skalowany tak, aby zmieścił się. Zauważ, że zostało to przetestowane z Fundacją 3, a nie 4 lub 5. Powinno to jednak również działać dla nich.
Problemem jest często, że odsetek nie działa, kiedy poprawione od
<div id="map_canvas" style="height: 40%;"></div>
do
<div id="map_canvas" style="height: 400px;"></div>
To działało w porządku.
W ZURB F6 - wykorzystywać elastyczne Embed: http://foundation.zurb.com/sites/docs/responsive-embed.html – iamrobert