[Resolved] On mobile web browsers, my embedded calendar is not visible

Home Forums Support [Resolved] On mobile web browsers, my embedded calendar is not visible

Home Forums Support On mobile web browsers, my embedded calendar is not visible

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1492295
    Orin

    Dear GeneratePress,

    I’m using SyncroMSP as my help desk and calendaring solution. They provide a way to embed my bookable calendar on my website.

    Please check it out here:

    http://bentodesk.com/calendar

    If you go to that same page in a mobile browser, you cannot see the calendar. Their support team said that this is beyond their scope of support. But here is what they told me:

    “The script is being cut off because the css is shrinking the page. The javascript is also designed for best viewing on large format screens. If you would like the page not to shrink, I would advise creating a media query for the inside-content on that page to increase the size of the body. This page may provide a bit more info on that end, https://stackoverflow.com/questions/46395377/is-it-possible-to-target-only-my-home-page-with-a-media-query”

    I don’t really understand what he is telling me. I am hoping that the GeneratePress team can help me solve this since it might relate to this issue.

    Thank you!

    #1492418
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    The page is “shrinking” so it can become mobile responsive.

    If I’m understanding correctly, they’re asking you to make it so your website isn’t mobile responsive so their iframe will display correctly. While this is possible, I definitely don’t suggest doing it.

    The issue here is that they’re absolute positioning their iframe on the page, and then using some padding percentage CSS. This will work on desktop, but will cause issues like this on mobile.

    #1492495
    Orin

    Thank you Tom! I will go back to them and see what they say. I appreciate your help.

    #1493501
    Tom
    Lead Developer
    Lead Developer

    No problem!

    #1495430
    Orin

    Hey Tom,

    They got back to me. Here’s the reply. Curious to see what you think? Thank you!

    You can target a specific page only via css as well as target solely mobile devices using @media queries. I can see what he is describing and how it may be not working properly. It would be best to use media queries. iframes in general are not great code, however, that is what is chosen to create this module.

    You can try the following, but it wouldn’t be great code.

    .rs-widget-container iframe {
    position: relative;
    top:0;
    bottom: 75%;
    width: 100%;
    height: 700px;
    }

    #1495694
    David
    Staff
    Customer Support

    Hi there,

    well thats a weird reply from the developers ๐Ÿ™‚
    Try this CSS – its in the media query and is slightly more specific so should override their default CSS:

    @media(max-width: 768px) {
        .entry-content .rs-widget-container iframe {
            position: relative;
            top:0;
            bottom: 75%;
            width: 100%;
            height: 700px;
        }
    }
    #1495963
    Orin

    Thanks David! I agree. It felt VERY unprofessional.

    Okay, I used what you suggested.

    @media (max-width: 768px) {
        .entry-content .rs-widget-container iframe {
            position: relative;
            top:0;
            bottom: 75%;
            width: 100%;
            height: 800px;
        }
    }

    It is now working on mobile, however when I go to it on a desktop the width is the same is it is on a mobile device.

    Thanks again for helping me with this!

    #1495980
    Orin

    I changed it around a bit, closer to what they suggested.

        .rs-widget-container iframe {
            position: relative;
            top:0;
            bottom: 75%;
            width: 100%;
            height: 800px;
        }

    It’s working for the most part. The only bummer is on a mobile phone when in portrait mode Sunday is cutoff on the right side and there is no way to scroll over.

    #1496827
    David
    Staff
    Customer Support

    Content within iFrames that are served from a 3rd party can only be re-styled from the 3rd party server. Any CSS we try to apply at your site level simply wont work.

    The only thing you may be able to do is to disable the mobile viewport on that particular page – which Leo provides a snippet for:

    https://generatepress.com/forums/topic/using-generate-disable-mobile-plugin/#post-392268

    The other course of action is ask the developer if they have any other method of serving up the calendar – they really should be thinking about making it mobile responsive ๐Ÿ™‚

    #1496856
    Orin

    Thanks again David! I completely agree. However, they already told me they’ve hardly received any tickets regarding this issue so it’s not a priority to change the way it functions. I wonder if most people aren’t using this feature of their software.

    Well, at this point it’s good enough. I’ll never be booking appointments on Sundays anyway, so it’s not a HUGE deal.

    I appreciate your help and for going above and beyond on supporting me.

    #1496989
    David
    Staff
    Customer Support

    Glad we could be of some help!

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