Google Calendar iFrame not publishing correctly

[CSJ]

Hi! So a few weeks ago, I had an issue with my Google Calendar iFrame running off my iphone screen and fixed it with the code below. On the backend, the calendar looks fine but I just looked at the front end and the calendar is way taller than I set it to be. I've tested it with different padding-bottom values and the calendar does not change in height. Any advice?

<style>
iframe {
width: 10px !important;
min-width: 100%;
*width: 100%;
}

.responsive {
width: 100%;
height: 0;
padding-bottom: 55%
position: relative;
}

.responsive iframe {
position: absolute;
width: 100%;
height: 100%;
}
</style>

<div class="responsive">
<iframe src="https://calendar.google.com/calendar/embed?showTitle=0&amp;showDate=0&amp;showPrint=0&amp;showTabs=0..." style="border-width:0" width="100%" height="250" frameborder="0" scrolling="no"></iframe>
</div>

[CSJ]

Update--looks like I no longer need the css fix to make google calendar display properly on iOs. But would still appreciate any insight as to why the CSS was no longer working to change the height of the Google Calendar embed.

[CSJ]

Update--The problem is back. When I do not use the CSS with the Google Calendar embed code, the calendar does not diplay properly on iPhones, but the iFrame contraints no longer work. Any help?

[CSJ]

Now my calendar is doing this when I add the CSS.

But without the CSS, it looks like

[Bernadette3]

I'm not sure what in the code would cause the spacing issue but my first guess is the padding. When you turn your phone to landscape does the original code still cutoff? 

[CSJ]

Hi @Bernadette. Thanks for responding and helping out again! After some playing around, I think it was just an issue with having two Google Calendars on the same page; not sure why but getting rid of the second one seemed to do the trick.