1

O iframe fica responsivo e funciona perfeitamente quando o faço em protótipo. Porém nesse caso não sei por que ele não obedece o max-width de seu nó pai. Ele sempre fica bem menor do que o espaço que eu libero para ele em max-width de seu nó pai.

Eu queria que ele fosse responsivo e preenche-se o nó pai(#contatoendereco) inteiro o quanto puder.

Obs: reparei que sempre que retiro o nó avó(#containercontato) ele funciona! não sei porque.

edit: quando digo iframe, assume-se erradamente que é o #map-resposive(iframe encapsulado).

-------JSFiddle-------

#containercontato {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
}

#contatoendereco {
    display: flex;
    flex-flow: column;
    max-width: 600px;
    border: 1px solid;
}

#map-responsive {
    width: 100%;
    height: 100%;
    border: 1px solid black;
}

#map-responsive iframe {
    height: 100%;
    width: 100%;
}
<div id="containercontato">
    <div id="contatoendereco">
        <h1>Endereço</h1>
        <p>Av. Bernardino de Campos,</p>
        <p>98</p>        
        <p>São Paulo,</p>
        <p>SP 12345-678</p>
        <p>[email protected]</p>
        <div id="map-responsive">
            <iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3728.5346981934304!2d-41.11321798469949!3d-20.850487786095172!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xb942b79a95c33d%3A0x8f4c1261f8d0f08e!2sR.+Vinte+e+Cinco+de+Mar%C3%A7o%2C+373+-+Centro%2C+Cachoeiro+de+Itapemirim+-+ES%2C+29300-100!5e0!3m2!1spt-BR!2sbr!4v1490289308120" width="300" height="150" allowfullscreen="allowfullscreen"></iframe>
        </div>
    </div>
</div>

4
  • o que eu vejo é isso kithomepage.com/sos/iframe-mapa.png 609x917 os nove dos 609 resultam da captura efetuada sem precisão
    – user60252
    Commented 22/04/2017 às 1:24
  • @LeoCaracciolo código copiado e colado do que postei: jsfiddle.net/Amzero/n8zmc27t
    – Amzero
    Commented 22/04/2017 às 16:24
  • Não estou entendendo, o iframe abre com max-width: 600px; da contatoendereco que o contém. Para obedecer o avô (containercontato) tem que tirar do pai (contatoendereco)
    – user60252
    Commented 22/04/2017 às 16:36
  • @LeoCaracciolo Não sei se isso responde sua dúvida, mas no meu site original, containercontato tem 2 filhas, a contatoendereco e a contatotelefone, que eu retirei para deixar o simples possivel para tirar duvidas aqui. containercontato tem 1000px de width, contatoendereco 600px e contatotelefone o resto(400px). Qualquer duvida só perguntar.
    – Amzero
    Commented 22/04/2017 às 16:56

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .