Responsive Iframe

1

Is there a way to allow responsive iframe width and height so the map shows beautifully on tablets and phones? Mine does not. How do you go about this? thanks! don

2

Hi,

Can you explain what do you mean by responsive? You can set the iframe to any width and height using CSS in your app. Or do you mean the contents of the iframe?

3

Two ideas how to make iframes responsive (but you can think of them as divs or imgs it’s similar):

<iframe width="100%" height="100%" src="https://maphub.net/embed/3"
      frameborder="0"></iframe>

or with inline CSS style:

<iframe src="https://maphub.net/embed/3" frameborder="0" 
   style="width: 100%; height: 100%; margin: 0; padding: 0;"></iframe>
4

Thanks for that hyperknot. It fills the frame nicely with phones and tablets but it looks funny on desktops. Like the image is cut in half. Is there a way to fix this? I’ll leave my website here: http://spaceheromission.com/

5

The embed is really nice on your website! For the sizing, you can do fixed height to fix it, like:

<iframe width="100%" height="500px" src="https://maphub.net/embed/5413" frameborder="0"></iframe>

Now to combine this with responsive mobile views, you’d need CSS. But an iframe element acts like anything else, so you can also add an id and style it in your CSS as you like.

HTML
<iframe id="mymap" src="https://maphub.net/embed/5413" frameborder="0"></iframe>

CSS
#mymap {
...
}
8

The new HD embeds and the Embed wizard features a responsive option, where the embed will take up 100% of the available space.