Responsive content is no longer responsive when in an iframe

This might help: https://www.smashingmagazine.com/2014/02/27/making-embedded-content-work-in-responsive-design/

Your iframe links to: https://astore.amazon.com/treemousepads-20 which is not responsive. It has no responsive css in its styles.

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="https://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 https://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?

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="https://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="https://astore.amazon.com/treemousepads-20" width="500" height="450" frameborder="0" style="border:0" scrolling="yes"></iframe>
into
<iframe src="https://astore.amazon.com/treemousepads-20" width="500" height="450" frameborder="0" style="border:0" scrolling="no"></iframe>

Here’s a screencap: https://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: https://jeffreysambells.com/2012/09/22/ios-safari-web-inspector

If you’re on a PC, this may work: https://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.

“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!

I don’t understand why but following these insturctions fixed it(or at least improved it): https://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.

More on this topic here:

https://www.ads-software.com/support/topic/menu-does-not-show-up-when-viewed-from-mobile?replies=9