Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • February 25, 2016 at 8:40 pm #589439
    caminator

    I have a 3rd party iframe installed on one of my pages for a booking form that in safari and chrome on an iphone 6 is overflowing off the page. I went through the developer of the form first and this is what he stated:

    1. When your responsive site is in portrait mode, it seems to be restricting the width of the content area to “width: 85%”.

    2. But for some reason, the content area of your page is allowing the iframe (100% width) to expand wider than it should. This is why it looks cut off on the right: because its wider than the rest of the site in portrait mode.

    I have my page listed privately. Thanks for any help you can provide.

    February 27, 2016 at 6:00 am #590149
    Rikard

    Hi caminator,

    I couldn’t see anything like that on my end, could you please post a screenshot of what you are seeing on your end? Also, is it only happening on Iphone 6?

    Regards,
    Rikard

    February 27, 2016 at 7:01 am #590167
    caminator

    It worked fine on my note 5 using chrome as well as on safari using an ipad mini, haven’t been able to test other devices. I’ve attached a screen shot below.

    February 28, 2016 at 6:20 am #590346
    caminator

    I tested it on more devices. I could only replicate it on iPhones. Safari and chrome were the only browsers tested on the iphones and both had the same issue. It occurred on a 5s, 6, 6s and 6s plus but only in portrait mode. In landscape it appeared fine. Did not have any issues on any ipad models.

    March 1, 2016 at 1:56 pm #591520
    Yigit

    Hi!

    Please try adding following code to Quick CSS in Enfold theme options under General Styling tab

    @media only screen and (max-width: 480px) {
iframe#booking-widget-iframe { width: 100% !important; }}

    Cheers!
    Yigit

    March 1, 2016 at 11:41 pm #591816
    caminator

    Thanks Yigit.

    Unfortunately this didn’t fix the problem, it’s still overflowing off of the page and still only in portrait mode.

    March 2, 2016 at 6:17 pm #592250
    Yigit

    Hey!

    Can you please try changing the code to following and check if that helps? 

    @media only screen and (max-width: 480px) {
iframe#booking-widget-iframe { width: 460px !important; }}

    Regards,
    Yigit

    March 2, 2016 at 8:07 pm #592279
    caminator

    That did the trick. Thank you so much.

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘iFrame overflowing page on mobile’ is closed to new replies.