Php photo gallery TWG | JFUploader | TWG Flash upload | WFU | Forum

I'm running into an issue where iframe content width is wider than the screen on iOS, but also on Android.

The test URL is:
https://peoplesbanktheatre.com/events/tickets/?EventId=1001

After landing on this page, click "Book Now" to see the problem screen. On iOS, the text fails to wrap, and the image below the text exceeds the screen width. On Android, the text wraps, but the image still exceeds the screen width. Screenshots:

iOS:
https://peoplesbanktheatre.com/wp-content/uploads/2019/05/IMG_8141.png

Android:
https://peoplesbanktheatre.com/wp-content/uploads/2019/05/IMG_8208.jpg

The shortcode for this page is currently:
[advanced_iframe id="SpektrixIFrame" src="https://system.spektrix.com/peoplesbanktheatre_run1/website/EventDetails.aspx" height="1500" name="SpektrixIFrame" frameborder="0" enable_responsive_iframe="true" onload_resize=”true” url_forward_parameter="ALL" onload="window.parent.parent.scrollTo(0,0);" ]

Debug mode is on.

Please note: I do also have access to change the CSS of the iframe source URL, if that helps.

As I continue to work on this, I was able to to resolve the text wrapping on iOS by adding "scrolling=no" to the shortcode and the following to the parent site CSS:

#SpektrixIFrame {
width: 1px;
min-width: 100%;
*width: 100%;
}

However, the seating plan overview image is still larger than the width of the iFrame on iOS.

I was able to get the image to fit with the following style applied to the image vai the iFrame URL's CSS:

transform: scale(0.75);
transform-origin: left;

Probably not the most elegant solution overall, but it seems to do the trick for now.

are you using the free or the pro version?

because enable_responsive_iframe="true" should actually add
width: 1px;
min-width: 100%;
max-width: 100%;

I checked you code and this does overwrite your #SpektrixIFrame

about the image. maxbe adding max-width:100% there is also an easy fix.

Best, Michael