| Php photo gallery TWG | JFUploader | TWG Flash upload | WFU | Forum https://www.tinywebgallery.com/forum/ |
|
| iFrame content too wide on mobile https://www.tinywebgallery.com/forum/viewtopic.php?f=21&t=6163 |
Page 1 of 1 |
| Author: | drewallen [ 22. May 2019, 04:46 ] |
| Post subject: | iFrame content too wide on mobile |
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. |
|
| Author: | drewallen [ 22. May 2019, 05:19 ] |
| Post subject: | Re: iFrame content too wide on mobile |
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. |
|
| Author: | drewallen [ 22. May 2019, 06:15 ] |
| Post subject: | Re: iFrame content too wide on mobile |
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. |
|
| Author: | TinyWebGallery [ 22. May 2019, 22:43 ] |
| Post subject: | Re: iFrame content too wide on mobile |
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 |
|
| Page 1 of 1 | All times are UTC + 1 hour [ DST ] |
| Powered by phpBB® Forum Software © phpBB Group http://www.phpbb.com/ |
|