Embedded iframe - display on 7.0 version perfect, same code, display on 7.1 terrible, can you help?

Hi Squarespace Forum,

I am switching over from 7.0 to 7.1,

As part of this I am integrating my booking system into my website via an embedded 'iframe', that's an important part of the switch,

On 7.0, the display is perfect, particularly concerning the Mobile view - the embedded iframe adapts to the smaller mobile display, and the overall site retains it's size,

See 7.0mob.jpeg attachment below for mobile screenshot, or view: www.confidentswimmers.com/booking - on mobile

However on 7.1, the exact same code causes problems making it unusable, the embedded iframe seems to expand as if it is being viewed on a full desktop and doesn't adapt. The 'centered' site logo is lost, and you have to zoom right out, making the entire mobile display tiny, see attachment 7.1mob1.jpeg (default view) and 7.1mob2.jpeg (zoomed out view)

www.confidentswimming.squarespace.com/book - on mobile

The code used is exactly the same, and provided by the developers Timetap, and looks like this.

<iframe src='https://www.timetap.com/emb/123456' frameborder='0' width='1200' height='500'>

(ps I have tried it with <p align="centre"> and </p> code too and it helps to at least centre it but doesn't affect the overall large display - also I changed the number to 123456 from the actual code used, as I don't know if I should avoid showing the exact code here, but it was a different 6 digit number).

The developers suggested trying to adjust 'width' from 1200 to 'auto' which I had done, it that makes the display actually really tiny (see 'auto.jpeg' image attached) - smaller than it would otherwise be on mobile view, and the same small size even on desktop view. I have also tried adjusting width to smaller sizes, and whilst it is possible to reduce it down to about '300' so that it fits into the mobile view correctly, this unfortunately remains the same when viewing in desktop. Whereas previously, the width set to '1200' displayed nicely in desktop, and auto-adjusted within the mobile view to fit that perfectly too (again, viewable on mobile at www.confidentswimmers.com/booking).

I have tried removing ALL additional CSS and can confirm nothing else is conflicting with it.

And lastly, even if I adjust the 'embed block' size, it makes not difference and the embedded iframe still wants to take up a full screen, (see 'adjust.jpeg' image attached)

Please, can anyone help - is it normal to have this situation with an embedded iframe where they worked perfectly on 7.0, but have a huge problem with the display in 7.1?

Timetap the scheduler developers seem to think there's nothing they can do. Squarespace seem to think there's nothing they can do, as it involves code.

Thank you for ANY help you can give, whether to adjust this so it displays correctly and adapts to the mobile view properly, or confirming that this is a widespread issue on 7.1, which surely it cannot be! The only I can think is if there is a way to set the display so that it shows in mobile at a certain width (eg 300) and desktop on a different width (eg 1200), - but I would be much happier if it would auto-adjust, as it did automatically on 7.0.

Thanks 🙂

Thank you SO much! Lifesaver

As an aside, I can see you have a 'tablet' view in the screen recording you gave, is that something that would be accessible to me too? I fear the tablet view of my site will not be very good and it would be good to find out! But not many people visit by tablet.

Thanks for any input

You're welcome.

Tablet views are generally low (typically less than 3%) so Squarespace doesn't put a lot of emphasis on them yet. The tablet view buttons are provided by a professional Chrome plugin for Squarespace that gives designers many additional features within Squarespace. You can view details here.