CSS & JS Problem. Responsive DIV Container

The CMS Questions
4

Hi there,
first of all I think you have to set the outer container to position: relative so the child-container (#map) gets the right height.

But if you really want to keep the aspect-ratio of your map, you either have to work with grid or the old responsive iframe hack for videos. With that you need an extra container to set the width of your map and the height is defined with top or bottom padding. the actual map is inserted with an absolute position.

The code would be something like this:

<div class="wrapper">
  <div class="kirby-leafleat-map">
      <div id="map"></div>
  </div>
</div>

And the CSS:

.wrapper {
  width: 100%;
  max-width: 35rem;
  position: relative;
}

.kirby-leafleat-map {
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* this gives you a 16/9 ratio**/
  position: relative;
}

#map {width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

You can see it here how it works

Cheers
tom