Skip to main content

iframe display on mobile

Mark Flint

Hi guys,

I'm having issues with iframe/embed modules again. All to do with the height they display at on mobile. This one relates to the calendar software, Calendly.

If you view the page https://right.rent/results/essential-living/ on mobile, you should see that it only displays half the calendar. The other half you have to scroll down to view within the iframe. I can't seem to change this no matter what custom CSS I use.

By the way, it seems to display fine on Google Chrome Inspect Element, but not on actual mobile, so view it on your phone to see what I mean.

Calendly dug into this for me as I initially thought it was to do with their embed. But they've found the following:

To help you troubleshoot this further, I dug into your code a little more with the browser developer tools and noticed that your website is adding on custom values to iframe elements. Because of this, it is forcing the size of the Calendly embed iframe (the embed code builds and iframe) to a max-height of 295px. Can you locate where in your website code this style is being added and adjust that? Once you remove that max-height value for all iframes, then the ​embed should be able to open to the size that you've set on the Calendly embed code.

You should see this value applied to the iframe within the code.

Is this a value that's being applied by Brizy? If so I'd love to be able to change this to auto as I think this would solve a lot of the problems I'm having.

Have the embed module dynamically adjust based on the size of the content would be a great update if that can be added to the to-do list? And I use quizzes that might be 500px high on question 1, but if question 2 has more content/answers, then it might be 800px high; so it really needs to dynamically adjust based on the content being loaded.

Thanks,

Mark

0

Comments

3 comments

Date Votes
  • Permanently deleted user

    Hi Mark,

    Thank you for getting in touch with us.

    We just checked your project and you didn't add it in the correct place, you should add the Custom CSS to the embed code of your calendar.

    Best regards, Nelea.

    0
  • Mark Flint

    I've tried that Nelea. For instance, I've just added max-height:100%!important to the embed code now. It displays fine when you inspect on Chrome, but on actual mobile it still cuts off. Can you see the same thing?

    0
  • Denis B

    Hi Mark,

    Please, add CSS code below in Custom CSS, this should solve the problem with height.

    .calendly-inline-widget iframe {
       max-height: 100% !important;
    }

    If this rule should work only for mobile devices, then use this code with media query:

    @media (max-width: 767px) {
       .calendly-inline-widget iframe {
          max-height: 100% !important;
       }
    }

    Best regards

    0

Please sign in to leave a comment.

Didn't find what you were looking for?

Ask a Question