On mobile views, the plugin hides all the images

Hey gray7apps,

I just viewed your site on my phone and it seems to be displaying the Instagram photos successfully (screenshot). Is that how it’s supposed to look or am I missing something? I see that you’re using media queries to hide the other photos below certain breakpoints but the remaining photos seem to be displayed correctly on my end.

John

Thanks for the quick response John.

Could I ask what device you’re using? I just tested on an iPhone 6, 6s and Samsung Galaxy S6 and both of those devices hide the actual images. – https://snag.gy/hgOmsE.jpg

Oddly iPhone 5s DOES display it correctly and does your plugin justice: https://snag.gy/Vy6CYQ.jpg

Chrome on iPhone 6S Plus also acts the same way: https://snag.gy/Q58N09.jpg

also has a problem on the Nokia Lumnia 930 (windows phone) https://snag.gy/YmW2iT.jpg
I’m using BrowserStack.com to test those devices, btw.

I tested it on my iPhone 5, my wife’s iPhone 6, and every device on Chrome Developer Tools too and it seems to be displaying correctly on all of them (Nexus 6P). Do you have an actual device you can try testing on rather than Browserstack?

Does the issue only occur with your current theme or even with a default WordPress theme such as TwentyFifteen?

great question. I was using a real iPhone 6s, and browser stack does offer “real device testing” as well as emulators. What it came down to finally, why it was working on the iphone 5, but not iphone 6 is iphone is at 320px width, and iphone 6 is at 375px. There is some code within your instagram plugin that when at widths between 320 – 475px does some funny stuff with setting background images on elements instead of showing the actual image, probably due to trying to find the proper resolution to display. So it’s not about device headers as I originally thought, but what jQuery does when it first loads the screen at a certain width (not just resizing within chrome developer tools without a proper refresh).

Overriding this by defining within the shortcode to always show the thumbnail seems to be a fix, ie imageres=thumb

Thank you very much for working with me towards a solution.

Ah, yeah that makes sense. Glad to hear you were able to find the problem and a solution! If you have any other questions or issues at all then just let me know, and thanks for using the plugin ??

John