Liebe Community,

seit dem letzten Update ist der Vertretungsplan (Google Dokument > IFrame) nicht mehr responsive.

Hätte jemand eine Idee oder einen passenden Code, damit dieser wieder für die Ansicht auf einem Handy geeignet ist? Leider habe ich den alten Code durch das herumprobieren von gerade eben nicht mehr.

Es handelt sich um die folgende Seite: https://jkgs-berlin.de/vertretungsplan.html

Den folgenden neuen Code habe ich von einer Internetseite. Immerhin wird der Vertretungsplan nun wieder angezeigt! Responsive ist er dadurch jedoch nicht.

Aktuell schaut der Code so aus:

HTML Code:
<iframe width='800' height='1000' frameborder='0'
src="https://docs.google.com/document/d/e/2PACX-1vS5CQJBjdJkYIPdkfp58zDOPuCwMPzd_NmfAhjpd8NeNWzC23kz_AHuYItW_lnDlRICu1zLlWQaqmuh/pub?embedded=true" width="100%" height="800"></iframe>

CSS-Code:
     #Iframe-Liason-Sheet {
       max-width: 550px;
       max-height: 2000px;
       overflow: hidden;
     }
      /* inner wrapper: make responsive */
     .responsive-wrapper {
       position: relative;
       height: 0;  /* gets height from padding-bottom setting */
       -webkit-overflow-scrolling: touch;
       overflow: auto;
     }
     .responsive-wrapper iframe {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       margin: 0;
       padding: 0;
       border: none;
     }
     /* padding-bottom = h/w as a % */
     .responsive-wrapper-wxh-550x2000 {
       padding-bottom: 363.6364%;
     }
     .iframe-border {
       border: 1px solid #000;
     }
     .center-block-horiz {
       margin-left: auto !important;
       margin-right: auto !important;
     } 

Liebe Grüße im Voraus