Google Calendar Cutoff on iPhone

Hi,

I embedded a Google calendar into a website and made the code responsive. The code I used is below. Unfortunately the Agenda view is cutoff when viewed on an iPhone. Does anyone know how to fix this issue?

The web page is sitting behind a Coming Soon page but I can bring the page live if necessary.

Thanks for your help.

Embedded Calendar Code on Web Page.
<!– Responsive iFrame –>
<div class=”embed-container”>
<div class=”big-calendar”>
<iframe src=”https://www.google.com/calendar/embed?showTitle=0&showPrint=0&height=600&wkst=1&bgcolor=%23FFFFFF&src=chadashcommunity%40gmail.com&ctz=America%2FDenver&#8221; style=” border-width:0 “width=”100%” height=”600″ frameborder=”0″ scrolling=”no”></iframe></div>

<div class=”little-calendar”><iframe src=”https://www.google.com/calendar/embed?showTitle=0&showPrint=0&mode=AGENDA&height=150&wkst=1&bgcolor=%23FFFFFF&src=chadashcommunity%40gmail.com&ctz=America%2FDenver&#8221; style=” border-width:0 ” width=”300″ height=”150″ frameborder=”0″ scrolling=“no”></iframe></div>

</div>

CSS Code
/* Responsive iFrame */

.embed-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

@media (min-width: 768px) {
.little-calendar {
display: none !important;
}
}

@media only screen and (max-width: 767px) {
.big-calendar {
display: none !important;
}
}