How to make iframe responsive * Solved*

1

A village hall client is looking at changing their booking software and this should be embeddable as an iframe (not a full iframe page however). However, if I leave the code at width and height 100% most of the calendar does not show. if I set the width and height in pixels, it is fine on desktop but no longer responsive. I could display 3 different instances for desktop, iPad and mobile but its a bit of a botch and I’m sure this can be rectified with some custom CSS.

iframe code is as follows (actual name redacted for security):

<iframe src='https://hallbookingonline.com/xxxx/plugin.php' width=100%' height=100%'> </iframe>

looks like this:

Screenshot 2024-02-20 at 11.45.53
Screenshot 2024-02-20 at 11.45.531295×195 21.6 KB

Any suggestions? Thanks

2

Easy solution - it’s just the Height that needs adjusting to pixels. Leave the Width at 100% and all is fine.

2 Likes
3

My Offsite stack has several possible methods to make your iframes responsive…

4

Here is a screenshot of the options:

CleanShot 2024-02-20 at 15.57.55@2x

If you use iframes, Offsite is a seriously good stack. I know that may seem biased, but it is. 😃

1 Like