0

I looked up how to make the iFrame work within a responsive environment, thats fine. What I want is for the iframe to match the height of the div next to it. Its either slightly bigger or smaller depending on the viewport.

I have already tried flexbox + flex:1 and my fluid grid has table + table cell rules applied.

Here is my code (HTML);

<section class="section9"> <!-- section start (google maps) -->


<div class="col-12"> <!-- contact card container -->
   <h3 class="whitetxt">Contact us</h3>
    <div class="col-6 list2"> <!--  list 2 start-->
      <div class="col-16 cardtop2">
        <h3 class="whitetxt">Contact us</h3>
      </div>
      <div class="col-16 padsvg-half">
        <p>Ocean Village Innovation Centre, Ocean Way, Southampton SO14 3JZ</p>
        <p>faprotect@fa92group.com</p>
        <p>01234 725789</p>
        <p><strong>Opening times</strong></p>
        <p>Mon - Fri : 9am - 6pm</p>
      </div>
    </div> <!-- list 2 end -->

  <div class="google-maps col-10"> <!-- google maps plugin -->
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2516.603122013116!2d-1.3963879847838265!3d50.894055463183!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487471337880ce7f%3A0xb10a5bc30c720cee!2sAnsoff!5e0!3m2!1sen!2suk!4v1523993781041" width="100%" height="352.781px" frameborder="0" style="border:0;min-height:352.781;" allowfullscreen></iframe>
  </div> <!-- google maps plugin -->
</div> <!-- contact card container end -->

<div class="col-2"></div> <!-- gutter -->

And for the CSS;

.google-maps {
    position: relative;
    padding-bottom: 35%; // This is the aspect ratio
    height: 0;
    overflow: hidden;
}
.google-maps iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
AdamElsbury
  • 35
  • 7
  • @pete Why has this been marked duplicate? The other questions do not answer my issue. There is something to do with the iframe that are making my layout weird. – AdamElsbury Apr 20 '18 at 13:17
  • You've asked how to make equal height columns. regardless of what elements they are, the duplicates show you how to do it – Pete Apr 20 '18 at 13:20
  • No they do not. I already have table + table cell rules applied to my fluid grid. The iFrame is resizing itself. I have no experience with Iframes, whats the point in this website if you cannot ask questions? – AdamElsbury Apr 20 '18 at 13:23
  • Well none of your code above shows that does it? Try making a proper [mcve] and maybe you will get the help you need – Pete Apr 20 '18 at 13:24
  • I have added the things you just asked for. Now can it be unlocked please? – AdamElsbury Apr 20 '18 at 13:31
  • 1
    Sorry but the code you gave is not reproducing the issue, you will need to give some more specific information around the problem. https://jsfiddle.net/LxovsL0m/ Also, not a good idea arguing with people who can help you. – Pogrindis Apr 20 '18 at 13:35
  • possible guidance: https://stackoverflow.com/q/38382734/3597276 – Michael Benjamin Apr 20 '18 at 16:07

0 Answers0