Skip to content

Instantly share code, notes, and snippets.

@magnetikonline
Last active September 27, 2022 18:12
Show Gist options
  • Save magnetikonline/8487169 to your computer and use it in GitHub Desktop.
Save magnetikonline/8487169 to your computer and use it in GitHub Desktop.
Responsive embedding of Google Maps (or anything <iframe> embedded really).

Responsive Google Maps embedding

Simple technique for embedding Google Maps <iframe>'s responsively using a padding-bottom percentage trick, which when applied to a block element will be calculated as a percentage of the element width - essentially providing an aspect ratio.

This technique should work on anything that is <iframe> embedded from your social network/service of choice.

.container {
height: 0;
overflow: hidden;
padding-bottom: 60%; /* desired aspect ratio */
position: relative;
}
.googlemap {
border: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
<div class="container">
<iframe
class="googlemap" frameborder="0" scrolling="no"
src="https://maps.google.com.au/maps....&amp;output=embed"></iframe>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment