Hi nixiemartyn,
I believe I found the issue, but I do not have a Windows Phone so I would appreciate your feedback.
Apparently non-Webkit browers (i.e. Internet Explorer, Firefox, and Opera) handle the CSS setting display: inline-block a bit differently than browsers like Chrome and Safari. This CSS setting is assigned to .blox-image-wrap. Here are the links to markup reference as well as the default CSS reference.
Windows Phone runs a mobile version of IE, which is why you are seeing the issue. I will work a permanent fix into the next update (probably by the end of the week), but in the meantime there are a few very easy temp fixes.
The first is to disable the Default CSS in the plugin. This can be done individually on each block, or globally on the plugin Settings page. The other plugin you referenced, Genesis Featured Image Header, does not add any default styling, which is why you didn’t have any issues with it.
The other option is to keep the default styling, but correct for the issue on Windows phone. The easiest thing to do is under the plugin Settings page, navigate to the Style tab and enter the following into the Custom CSS textarea:
.blox-image-container,
.blox-image-wrap {
width: 100%;
}
This should make the container and wrapper only as big as the screen on the Windows Phone which will force the image to also only be 100% of the screen size.
I ran some tests on the desktop version of IE and Firefox and this seems to do the trick. Once I am confident this does resolve the issue without adversely effecting Chrome or Safari users, I will amend the Default Stylesheet with these edits. Again, if you do try the temporary fixes, I would greatly appreciate your feedback.
Thanks,
Nick
