[Support request] Iframe responsive issue on some phones

Home Forums Support [Support request] Iframe responsive issue on some phones

Home Forums Support Iframe responsive issue on some phones

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1304998
    Alex

    Hi! My problem is a weird one.

    It only appears on my iPhone Xs, even after refreshing the cache, server cache and trying the website with three different browsers including incognito modes.

    On the other hand, it seems to work on Android and my friend’s iPhone 8. It also works fine with all browser mobile previews.

    It’s an embedded Microsoft calendar iframe, which just steps out of the container and extends the website width. I’m currently connected on my iphone and inspecting it through Safari inspector tools and modifying the browser CSS in realtime, but it has literally no effect.

    Console is empty, and it’s almost like the CSS does not work at all on the iframe element.

    The CSS code is fully visible on the website source code, and the iframe calendar is the last element of the website.

    How it should look:
    How it should look

    How it actually looks:
    How it actually looks

    #1305164
    David
    Staff
    Customer Support

    Hi there,

    iFrames can only be styled by CSS if it is served from the origin server – you cannot overwrite those style locally.

    What happens if you add the iFrame directly to the editor ? ie. no grids / or containers with extra padding ?

    #1305984
    Alex

    The iframe fills the screen, and overflows just a little bit. I tried modifying the inline CSS of the iframe tag to:

    <iframe src="https://outlook.office365.com/owa/calendar/DKPuhutaanpilvest@digikuu.fi/bookings/" height="100px" width="90%" scrolling="yes"></iframe>

    After adding the new iframe directly to the editor without containers or paddings, and I reload the page on my phone, the inline CSS seems to work for a fraction of a second, and then turns full width again and overflows the screen.

    Note: This only happens on my phone, I haven’t been able to replicate the bug elsewhere. On my friend’s phones the website works fine. I’ve tried refreshing all my browsers caches, tried with multiple browsers, refreshed servers cache, but still nothing.

    EDIT: If you check out the link, you can now see that there are two iframes. One in the original spot, and one plainly added through the editor without any containers.

    #1306134
    David
    Staff
    Customer Support

    How is the iFrame embed code being generated ?

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.