Skip to content

Instantly share code, notes, and snippets.

@uglyeoin
Created April 5, 2017 14:26
Show Gist options
  • Save uglyeoin/f2a68d895d0b5d39b0f5c4cd1faced02 to your computer and use it in GitHub Desktop.
Save uglyeoin/f2a68d895d0b5d39b0f5c4cd1faced02 to your computer and use it in GitHub Desktop.
## CSS
/* RESPONSIVE GOOGLE MAPS */
.googleMaps {
position: relative;
padding-bottom: 75%; // This is the aspect ratio
height: 0;
overflow: hidden;
}
.googleMaps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
/* END RESPONSIVE GOOGLE MAPS */
## HTML
<div class="googleMaps">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d9910.120400699736!2d0.0882521!3d51.613498!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xec92c9ffe1ab887d!2sSquare+Balloon!5e0!3m2!1sen!2suk!4v1491402362094" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment