Problem with inbedding html on mobile site

Design help General
1

Hi,

I am using calendly to take bookings on my website.

It offers a HTML Inline imbed and it works perfectly on desktop but on mobile the scrolling mucks up! If you start scrolling on the booking bit it automatically puts a scrollbar on it and doesn’t work properly, even when you turn scrolling off?

the page is
http://dwgoalkeepingacademy.co.uk/freesession/mon-u7-u10

Here is my site Read-Only: Webflow - DW Goalkeeping Academy

2

hi @samwhu30

Have a look at this thread, it might solve your issue

3

I think that is for a slightly different problem for me can’t seem to get it working still…

4

I’d assume the issue is you’ve got a fixed minimum width and height applied inside your embed code

image
image1600×789 296 KB
. That’s most likely making it scroll on smaller devices. Set the width to ‘auto’ or remove completely to test and see what happens

5

Thats the really weird thing, it makes no difference to the scrolling on the first scroll of the page it always has a scroll bar

6

@samwhu30 that is odd. It’s hard to give advice on custom code since we can’t try, publish and see live using a read-only link. EDIT: I had another look at the code using the chrome inspect tool and it seems there’s a bit of padding that is added from within calendly. Removing that got rid of the scroll bar

image
image1559×646 106 KB
. I don’t know if you’re able to change this inside calendly? Do they allow custom code?

8

40
402702×342 126 KB

this is the only bit of code I have from them so doesn’t look like its going to be possible to remove the padding! So frustrating, well found out though!

9

@samwhu30 yes, that’s the embed code. Sometimes, platforms allow you to add your own custom css. That would be the easiest way to override that padding. Otherwise, you’d add it inside this code but that can take a bit of experimentation.