Making a Google calendar show up on mobile

Site URL: https://www.beginnerballetforadults.com/

Hi! I need help getting a Google calendar to show up on mobile and tablet. It shows up fine when you look from a computer.

I've added two versions of the calendar, one big and one small, to the website temporarily. My hope is to make the design responsive so that computer users will see the big calendar and mobile & tablet users will see the smaller one. But right now neither calendar loads on mobile or tablet. There's just a blank rectangle. 

Any help or insight appreciated! Thank you.

Remove small calendar & then we will give code to resize calendar on tablet/mobile

Wow, really? That would be great. I've removed it. Thanks so much for your help.

Add to Home > Design > Custom CSS

/* GG Calendar mobile */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1597443987089_9529 iframe {
    width: 100%;
    height: 500px;
}
}
/* END GG Calendar Mobile */

Thank you so much! I appreciate your help. I followed your instructions and added that code. I'm still having trouble getting it to load on mobile, though. It comes out as a blank rectangle. Did I do something wrong, or is there more code I need to add elsewhere? 

15 hours ago, abigailoutdoors said:

Thank you so much! I appreciate your help. I followed your instructions and added that code. I'm still having trouble getting it to load on mobile, though. It comes out as a blank rectangle. Did I do something wrong, or is there more code I need to add elsewhere? 

Which mobile/version/browser do you use?

iPhone 6s running iOS 13.5.1 using Safari.

Are you able to see it using another OS or browser?