Problem with an iframe and bootstrap 4

Question

Problem with an iframe and bootstrap 4

Navigation

#1 by (3 votes)

0

I have a contact page where I put the part of the contact form in one half of the screen and my intention is to place the map of the company's location on the other half of the screen. Now, for this I do the following:

<div class="row">
   <div class="col-md-6">
        ... formulario de contacto
   </div>

   <div class="col-md-6 embed-responsive embed-responsive-21by9">
        <iframe src="https://www.google.com/maps/d/embed?mid=xxxxx" width="640" height="480"></iframe>
   </div>

The problem I have is that I had to put a map of google maps created as myMaps and the way to share it is through an iframe according to the code that shares google maps. The problem I have is that the map is not relocated when I shrink the window, less if I have it in another type of device ... Does anyone have a way to correct it? Thank you very much

google-maps bootstrap-4

asked by MNibor 10.10.2018 в 19:21

source

1 answer

Query that displays data within a range of dates How can I load data into some html text fields when the first loses focus?

score 3 · Accepted Answer

Iframe you can give a width of 100% through styles, but first you must remove the width attribute of your iframe. As shown below:

iframe{
  width: 100%
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
     <div class="col-md-6">
          ... formulario de contacto
     </div>

     <div class="col-md-6 embed-responsive embed-responsive-21by9">
          <iframe src="https://www.google.com/maps/d/embed?mid=xxxxx" height="480"></iframe>
     </div>
  </div>
 </div>