How to make responsive Google Map in Zurb Foundation

Question

I have try use zurb foundation 3. But have some problem with google maps. While I use google maps, the columns didn't 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>

Anyone could help me, please.

Thank you

Answer 1

try wrapping it in

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

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

If you're embedding 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 intrinsic ratio that >will properly scale your video on any device.