jehrler

Cawas’ solution worked like a charm and I’m no web slinger. I copied his main code into the advanced setting for a page. I inserted a Code Block on the page. Then I pasted the embedding code for the two versions of the Google Calendar that were optimized for different sizes into the Code Block. Wrapped each of those inside the div class code matching each size version of the embedded calendar like this: <div class="responsive-iframe-container big-container">##Google’s embed code for the big calendar##</div><div class="responsive-iframe-container small-container">##Google’s embed code for the small calendar##</div> This all worked great except that on phones (including iPhone) the small calendar would display fine BUT would not populate with any actual events. YMMV but this seems pretty universal. After a bunch of searching the only workaround I could find was to change the embed code for the smaller calendar to make it non-JavaScript based (so lose some of the formatting options). To do that you just change the embed code for the smaller calendar from: <div class="responsive-iframe-container small-container"><iframe src="https://www.google.com/calendar/embed?##blah,blah,blah##</iframe></div> To this (notice that it is now “htmlembed?” rather than just “embed?”) <div class="responsive-iframe-container small-container"><iframe src="https://www.google.com/calendar/htmlembed?##blah,blah,blah##</iframe></div>