Support » Fixing WordPress » Responsive content is no longer responsive when in an iframe

  • Resolved boldlygo

    (@boldlygo)


    Hey,

    My site has an amazon store in an iframe below the menu bar. When I try to look at the site from my smart phone I can’t scroll and look at all of the amazon products. The amazon store site that I am taking the content from is responsive. What can I do so that the content from amazon stays mobile friendly when I move it to my website?

    The site has some other issues as well… But what I’m the most concerned about right now is the amazon store.

    This is the website: treemousepads.com

    Thanks,

Viewing 9 replies - 1 through 9 (of 9 total)
  • Your iframe links to: http://astore.amazon.com/treemousepads-20 which is not responsive. It has no responsive css in its styles.

    Thread Starter boldlygo

    (@boldlygo)

    Hey Kidcompassion,

    I tried to follow those instructions earlier today and couldn’t get it to work. This is what I currently have:

    <div class="amazon">
    <iframe src="http://astore.amazon.com/treemousepads-20" width="500" height="450" frameborder="0" style="border:0" scrolling="no"></iframe>
    </div>

    With this in my css:

    .amazon {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
    }
    .amazon iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    }

    Hey Lorro,

    I guess I’m confused then. The content on http://astore.amazon.com/treemousepads-20 looks great on my smart phone. What do I need to change so that my phone will still grab all of the content when it’s in the iframe on my website? Should I be using an iframe?

    When I look at the amazon store on treemousepads.com from my phone, I can only see the two left mousepads and a piece of a mousepad on the right.

    Hey boldlygo! I’m Away from my laptop right now, so I can’t try it myself, but what happens if you give .amazon a fixed height and set it to overflow : scroll? Does it just totally break?

    Thread Starter boldlygo

    (@boldlygo)

    I changed it to this:

    .amazon {
    position: relative;
    padding-bottom: 10%;
    padding-top: 30px;
    height: 0;
    overflow: scroll;
    height:400px;
    }
    .amazon iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important
    }

    and

    <div class="amazon">
    <iframe src="http://astore.amazon.com/treemousepads-20" width="500" height="450" frameborder="0" style="border:0" scrolling="yes"></iframe>
    </div>

    When a view the page from my computer it now has a scroll bar. There’s no change to how it looks on my phone.

    I took a look at this from my phone in Safari’s mobile debugger, and it looks like in the mobile view, it’s making
    <iframe src="http://astore.amazon.com/treemousepads-20" width="500" height="450" frameborder="0" style="border:0" scrolling="yes"></iframe>
    into
    <iframe src="http://astore.amazon.com/treemousepads-20" width="500" height="450" frameborder="0" style="border:0" scrolling="no"></iframe>

    Here’s a screencap: http://postimg.org/image/4hkj985db/

    I’m not sure how to solve that! maybe a media query for mobile devices that adds overflow:scroll; !important to the iframe at resolutions below 800?

    Are you developing on a mac? If so, you can hook your phone up to Safari to debug: http://jeffreysambells.com/2012/09/22/ios-safari-web-inspector

    If you’re on a PC, this may work: http://stackoverflow.com/questions/11262236/ios-remote-debugging

    But when I tried using the mobile emulator, it actually let me scroll, so it wasn’t much help.

    Thread Starter boldlygo

    (@boldlygo)

    “I’m not sure how to solve that! maybe a media query for mobile devices that adds overflow:scroll; !important to the iframe at resolutions below 800?”

    I’m on a PC and I’m a newbie at all of this. What would that look like?

    Thanks for the help!

    Thread Starter boldlygo

    (@boldlygo)

    I don’t understand why but following these insturctions fixed it(or at least improved it): http://uploadwp.com/embed-an-amazon-astore-in-a-wordpress-site/

    It still isn’t responsive, but I can move view the entire webpage from my phone now.

    For some reason ‘blank title’ still comes up at the top of the page when I look at the website from my phone. I don’t understand why since the website does have a title.

    Thread Starter boldlygo

    (@boldlygo)

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Responsive content is no longer responsive when in an iframe’ is closed to new replies.