Lego2012
9/26/2016 - 10:05 PM

Responsive iframes and Maps with just CSS

Responsive iframes and Maps with just CSS

/* Responsive iFrame */
.responsive-iframe-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}
 
.responsive-iframe-container iframe,  
.vresponsive-iframe-container object, 
.vresponsive-iframe-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*
And then wrap your Google Map or Google Calendar iframe in a div like this:

<div class="responsive-iframe-container">
    <... iframe code >
</div>
*/