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:
How to embed a Google Calendar in a responsive way?
in Customize with code
Posted · Edited by jehrler
Clarity
Cawas’ solution worked like a charm and I’m no web slinger.
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:
To this (notice that it is now “htmlembed?” rather than just “embed?”)