title: Responsive Embed Foundation 6
body: <p>I'm working on a project for an intro to web design class, and I'm having trouble getting my map to be responsive. We're working with Foundation 6, but we aren't actually allowed to edit the foundation code, just our source code. I originally had the html set like this: (with the embed link to my map where my map here is)</p>
  
  <pre><code>&lt;div class="map-responsive"&gt;
  &lt;iframe src="map here" width="600" height="450" frameborder="0" style="border:0" allowfullscreen&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p></p>
  
  <p>And the CSS was set to: </p>
  
  <pre><code>.map-responsive{
  overflow:hidden;
  padding-bottom:56.25%;
  position:relative;
  height:0;}
  .map-responsive iframe{
  left:0;
  top:0;
  height:100%;
  width:100%;
  position:absolute;}
  </code></pre>
  
  <p>However, this adds quite a bit of padding on the bottom that I don't want, because it separates my page content from the map above it. I've tried removing it, but that makes the map disappear when shrunk down to mobile. I was wondering if there's any way to make the map responsive, without having the bottom padding? </p>