iFrame popping out on Mobile Devices

Community Forums Forums Design Tips and Tricks iFrame popping out on Mobile Devices

This topic is: not resolved

This topic contains 3 replies, has 2 voices, and was last updated by  David Chu 1 year, 4 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #53130

    steve_seattle
    Participant
    Post count: 5

    Hello!

    I have embedded a website listing on one of pages using the outreach theme (at http://irwinyachtsales.com/yacht-listings/) but the contents of this iframe pop out when viewed on a mobile device (like a smart phone or a tablet) – And even when you shrink down a web browser on the computer viewing this page it will not shrink the iframe down with it. Any ideas how to get this to shrink down with the website so its viewable on mobile devices? Below is the code I am currently using:

    <iframe style=”border: 0px #FFFFFF none;” name=”myiFrame” src=”http://www.boatwizardwebsolutions.com/pls/searchirwin.php?slim=pp291964″ frameborder=”1″ marginwidth=”0px” marginheight=”0px” scrolling=”yes” width=”1000px” height=”1000px”></iframe>

    Thanks for any help you fellers can offer! :)

    http://irwinyachtsales.com/yacht-listings/
    #53216

    David Chu
    Participant
    Post count: 1426

    Hi,
    I can’t say I like iframes at all, but they are a necessary evil at times. :-) As any CSS person knows, they are very hard to manage and control. All that being said, I do have a trick that can help a bit. It involves handing iframes similarly to the way we deal with image size – max-width. You could try using the following CSS command (Appearance…. Editor), maybe putting it in at the first responsive code level. In your site, I see that’s set to trigger at 1200px width. You could try this and adjust the percent figure to taste. It won’t magically match the styling of your site, but it will make its appearance suck somewhat less. :-)

    [css]
    iframe {max-width: 100%;}
    [/css]

    Dave


    Dave Chu · Custom WordPress Developer – likes collaborating with Designers

    #53256

    steve_seattle
    Participant
    Post count: 5

    Thanks for the tip!

    I actually solved the problem by including this rule in the style.css file:

    .entry-content iframe {
    max-width: 100%;
    }

    #53314

    David Chu
    Participant
    Post count: 1426

    nice!


    Dave Chu · Custom WordPress Developer – likes collaborating with Designers

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.