HTML Resize iframe to responsive iframe

Question

Hello I have an iframe in my website, it's 728px width.

Picture: http://s8.postimg.org/5r5d4wm7n/iframe.png

It's the blue background iframe.

I have a problem in mobile it's looks like this: http://s10.postimg.org/drrxc4ak9/iframe2.png

How should I fix it to be 100% width but still all of the 728px will be on the screen?

Thanks!

Answer 1

You could try this:

iframe {
 width: 728px;
}


@media screen and (min-width: 100px) and (max-width:  540px) {
iframe {
width: 100%;
}

Then, when the screen width size is above 540px, your regular code will work. In this case, 728px. When the screen width size is from 100px-540px, the iframe would be 100%.

Currently writing in on my ipad, so its hard to test the code. So I am sorry if there are some bugs.

Hope this helps

Answer 2

Try using a combination of width and max-width

iframe {
    width: 100%;
    max-width: 728px;
}