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!

barkingtuna
View Replies:
CogNet replied on at Permalink Reply
CogNet
I'm still just an intermediate when it comes to CSS and JavaScript/JQuery, but maybe CSS Media Types would work?

http://w3schools.com/css/css_mediatypes.asp...

The one that looks like the one you would be looking for is

@media handheld {}


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! :)
barkingtuna replied on at Permalink Reply
barkingtuna
Thanks... but this is beyond CSS or @media queries. I've tried everything in the book and all things point to it requiring JQuery.
adajad replied on at Permalink Reply
adajad
Here is a simple jquery for you (which sets the width to 90% of the browser window width):

$(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.