Openstreetmap / responsive

support
8

We only use a map on our “Contact” page to show our office location. As it’s only used once, it’s coded directly into the respective site’s template:

<div class="col-xs-12 col-sm-8 col-md-9" style="padding:0">
  <div class="map_canvas">
    <iframe width="100%" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.openstreetmap.org/export/embed.html?bbox=16.31356537342072%2C48.21824470121084%2C16.31705760955811%2C48.21977804659998&amp;layer=mapnik&amp;marker=48.21900780541438%2C16.31567895412445"></iframe>
  </div>
    <style>
      .map_canvas {
        overflow:hidden;
        background:none!important;
        height:400px;
        width:100%;
      }
    </style>
</div>

We use Bootstrap for the site, so the container/column CSS is not included in the snippet above.

The map itself works responsively without any issues so far.

1 Like