Can you help me with making my IFrame of a calendar responsive.

I have an English page which shows the calendar . It is not responsive. You can see it at https://test2.ottawaoc.ca/events/calendar. It contains the iframe call in a rawhtml block - <iframe style="border: none; margin: 0px;" src="/https://ooc.whyjustrun.ca/events/" width="1200" height="750"></iframe>

On the french page https://test2.ottawaoc.ca/fr/evenements/calendrier I have followed instructions in W3docs (https://www.w3docs.com/snippets/css/how-to-create-a-responsive-iframe-with-css) but the calendar does not show at all.

The instructions there involved some custom css which I have added to the page: .wrap-element { position:relative; overflow: hidden; padding-top: 56.25%; } .wrapped-iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } and some changes to the iframe call which are in the iframe row containing raw html <div class="wrap-element"> <iframe <spam class="attribute"> class </span> class="iframe-element" src="/https://ooc.whyjustrun.ca/events/" width="100%" ></iframe> </div>