Iframe mobile responsive mode

Asked

Viewed 12,676 times

0

Can anyone tell me how to make one iframe mobile responsive?

html css iframe
  • 1

    The iframe or the content within the iframe?

1 answer

1

Example using boostrap:

<div class="col-lg-6">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d467688.89495119266!2d-46.5952992!3d-23.6824124!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce448183a461d1%3A0x9ba94b08ff335bae!2sS%C3%A3o+Paulo+-+SP!5e0!3m2!1spt-BR!2sbr!4v1429724267414" width="100%" height="100%" frameborder="0" style="border:0"></iframe>
</div>

Example using any div:

HTML

<div id="MolduraIframe">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d467688.89495119266!2d-46.5952992!3d-23.6824124!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce448183a461d1%3A0x9ba94b08ff335bae!2sS%C3%A3o+Paulo+-+SP!5e0!3m2!1spt-BR!2sbr!4v1429724267414" width="100%" height="100%" frameborder="0" style="border:0"></iframe>
</div>

CSS

#MolduraIframe{
// Defina as resoluções para adaptar o tamanho conforme cada caso
@media (max-width:100px){
// Defina o tamanho que o objeto terá com tal resolução
}
}

In short: You should put the width and the height to 100% and adapt the basis of a div responsive external.

If you want to change the content of IFRAME and make the same responsive, that’s another story. I suggest you read: that, that and also, that

Browser other questions tagged html css iframe

You are not signed in. Login or sign up in order to post.