Responsive Google or Bing maps

If you are looking for an easy and fully responsive solution to embed Google or Bing maps on your website, you might want to try this CSS technique.

Apparently a lot of developers struggle to embed Google or Bing maps in responsive designs. As far I am concerned you can solve this with a very easy CSS technique.


Make sure you include the following CSS code on your website.

/* Flexible iFrame */

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

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


Place following HTML Code directly in your HTML.

<!-- Responsive iFrame -->
<div class="Flexible-container">
    <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src=";source=s_q&amp;hl=de&amp;geocode=&amp;q=Bern&amp;aq=&amp;sll=46.813187,8.22421&amp;sspn=3.379772,8.453979&amp;ie=UTF8&amp;hq=&amp;hnear=Bern&amp;t=m&amp;z=12&amp;ll=46.947922,7.444608&amp;output=embed&amp;iwloc=near"></iframe>

The DIV Flexible-container is the responsive container for the map. You can also place it inside another DIV if you like. The map embed code will then be placed inside the Flexible-container DIV. That is all. It will also work with any other iFrame embed.


I love to create and I won't ask for repayment. If you appreciate my work and would like to support me I am sure you will earn some extra Karma points.
Send a donation

Side Projects

๐Ÿ‘Š pure
๐Ÿ‘Š Rapid Bootstrap V4
๐Ÿ‘Š PreLoadMe
๐Ÿ‘Š Responsive Google or Bing maps
๐Ÿ‘Š Tumblr & IFTTT
๐Ÿ‘Š NavLax