waely waely - 2 months ago 48
CSS Question

Google Maps with Bootstrap not responsive

I'm using bootstrap and I embedded Google Maps API 3.

isn't responsive; it's a fixed width.

Also, if I use
height: auto
width: auto
the map doesn't show up in the page.


<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
#map_canvas {
height: 400px;
width: auto;

<div class="container">
<div class="row">
<div class="span6">
<div id="map_canvas"></div>


REVISED: The Official Post is outdated, so I've updated my answer and improved the code.

The following method does not require bootstrap or any other framework. It can be used independently. Make any content(google map iframes, video iframes, divs, so on.) responsive. To the parent element is applied a padding by calculating the aspect ratio. Then the child element is placed on top using absolute position.


<div class="iframe-container">
    <!-- embed code here -->

The CSS:

    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* Ratio 16:9 ( 100%/16*9 = 56.25% ) */
.iframe-container > *{
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;

Demo: http://jsfiddle.net/LHQQZ/133/