Need content in iframe to resize for mobile version
Permalink
This is above my pay grade... I have a few websites all with the same issue. Visit the following page on a desktophttp://www.i17tbirdstorage.com/rent-self-storage-online-85023/.... Now, visit it from a mobile device and you will see the problem. I've limited certain elements from displaying entirely by just creating a "nomobile" class the is set to display: none. I've then, using CSS, made certain elements resize relative to their parent element with no issue. I tried creating
iframe {
max-width: 90%;
}
but that does nothing to the iframe. Any thoughts? I am not a JQuery expert but can easily cut and paste if there is an easy solution if given good instructions.
Thank you!
iframe {
max-width: 90%;
}
but that does nothing to the iframe. Any thoughts? I am not a JQuery expert but can easily cut and paste if there is an easy solution if given good instructions.
Thank you!
Thanks... but this is beyond CSS or @media queries. I've tried everything in the book and all things point to it requiring JQuery.
Here is a simple jquery for you (which sets the width to 90% of the browser window width):
You can either include it in your footer (before closing body tag) between <sript> tags or add the code to an external js file and include in the header.
Don't forget to add an id to your iframe.
$(window).resize(function() { $('#iframe_id').width($(window).width() * 0.9); });
You can either include it in your footer (before closing body tag) between <sript> tags or add the code to an external js file and include in the header.
Don't forget to add an id to your iframe.
http://w3schools.com/css/css_mediatypes.asp...
The one that looks like the one you would be looking for is
You might have to try wrapping it in a special div for handheld media devices; I've never used this before, so I don't know how it will work, but hopefully it will! :)