Will not show up on mobile devices.

Hello, ssmediaco.

I just visited the URL in your post on an iPhone using the Chrome browser and I was able to see the Amazon reviews. If you are still not able to see them on your mobile device/browser, you might need to clear the browser cache, or there could be an issue with your theme or mobile browser.

There is one caveat to using the plugin on mobile/responsive sites: iframes do not typically scale in a responsive way. Therefore, the Amazon reviews delivered by ScrapeAZon might require both horizontal and vertical scrolling on a mobile device to read.

You can get a slightly better result on a responsive site by tweaking your HTML and CSS so that a ScrapeAZon containing element scales instead and the iframe scrolls within that element. For example, I know of one site that places ScrapeAZon’s shortcode inside a div with an ID of “scrapediv,” and then uses the following CSS markup to ensure that the iframe does not distort the responsive site:

#scrapediv {
width:100%;
height:500px;
overflow:auto;
-webkit-overflow-scrolling:touch;
}
@media only screen and (min-device-width: 768px) and (orientation: portrait),
screen and (max-width: 994px) {
#greviews,#scrapediv{
width:400px;height:300px;
}
}
@media screen and (max-width: 320px) {
#greviews,#scrapediv{
width:300px;
height:300px;
}
}

Unfortunately the Amazon Advertising API returns only an iframe URL as the source for the customers reviews, not the reviews themselves, which makes responsive design a bit challenging because iframes do not scale in a responsive way.

Hope this helps. Thanks for using ScrapeAZon and let me know if I can be of further assistance.

James

Ya, that’s what I figured. Thanks for your help. I think I might just not display it on that resolution then. One thing. When I do ‘display: none;’ this does turn off on the iphone but the disclaimer text is still there. Anyway to turn that off on that resolution as well?

Hi, ssmediaco.

You should be able to turn off the disclaimer by adding a display:none to the .scrape-api class. Example, using a snippet of the CSS from my previous post:

@media screen and (max-width: 320px) {
#greviews,#scrapediv{
display:none;
}
.scrape-api {
display:none;
}
}

Hope that helps! I’m going to mark this topic as resolved for now, but let me know if I can be of further assistance.

Thanks.

James

I put in this

.scrapeazon-reviews .scrape-api {
Display: none;
}

and the disclaimer text still won’t turn off. So weird that is stays on their on 2 diffrent iphone 5s.

Hi, ssmediaco.

The .scrapeazon-reviews class applies to the iframe. The .scrape-api class applies to the disclaimer, which is in an element separate from the iframe. So try this instead:

.scrapeazon-reviews,
.scrape-api {
display:none;
}

Alternately, you could do this:

.scrapeazon-reviews {
display:none;
}
.scrape-api {
display:none;
}

That should take care of both the iframe and the disclaimer.

Thanks.

James