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