Your iframe links to: http://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="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?
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.
“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): 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.