Geek Answers Handbook

How to make a responsive Google map in Zurb Foundation

I tried using zurb foundation 3. But you have some problems with google maps. Although I use Google maps, the columns did not want to be responsive.

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

Can someone help me please.

thanks

+6
source share
6 answers

try to wrap it in

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

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

If you embed a video from YouTube, Vimeo, or another site that uses iframe, embed, or> object elements, you can wrap your video in div.flex-video ## Heading ## to create an internal ratio that> scales your video on any device.

+9
source

I used Google maps with the Zurb Foundation and it worked for me. and i did not use iframes.

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

You will need to enclose the map in an element with id 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>
+1
source

The problem often is that the percentage does not work when I fixed

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

to

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

Everything went perfectly.

+1
source

So far, the "Flex Video" class is the best way to do this, although it adds the main cursive to the bottom of the div. So these are six of the half-dozen others.

0
source

Just add style = "max-width: 100%;" to your iframe code. As long as the iframe is inside one of the Foundation columns, it will scale to fit. Note that this was tested using Foundation 3, not 4 or 5. However, it should work for them as well.

0
source

More articles:


All Articles