Responsive Google Maps

Posted by Weston Ganger

When I get put Google Maps in a page, I always want it to be responsive. Heres how its done.

And I hate to say it but I should note that this also works with Bing Maps


.responsive-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}

.responsive-container iframe, 
.responsive-container object, 
.responsive-container embed{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


<div class="responsive-container">
  ...your maps iframe/embed here...
</div>

Article Topic:Software Development - HTML / CSS

Date:April 23, 2015

Recommended Posts