calendar Sharing a solution for embedding a Google Calendar that adjusts based on screen-size

This is probably easy for some of you, but it took me awhile so I decided to share in case it might help someone else...

I struggled for a couple days with the calendar portion of Squarespace - mobile formatting was the main issue, but there were other considerations as well. In searching for best overall option, I decided to see if I could use Google Calendar within a Squarespace website. It took awhile to figure some of the details out; but the things I learned are all easy to implement. 

1. Embedding the calendar is simple enough; here's a tutorial: https://www.askquesty.com/post/how-to-embed-google-calendar-squarespace-tutorial. 

2a. Once embedded, the next step is to wrap the code within the codeblock. Something like this works:

<div class="googleCalendar">

ENTER EMBED CODE FOR CALENDAR HERE

</div>

2b. Also, in the codeblock, change the width in the embedded code from width="800" to width="100%"

3. After the code is wrapped, head over to CSS and add something like this: 

<style>
  .calendar-container {
    position: relative;
    width: 100%;
    padding-bottom: 75%; 
    overflow: hidden;
  }
  .calendar-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
</style>

That's it. Now you have an embedded google calendar that adjusts based on the screen size and the height doesn't collapse. 

It isn't perfect, but it's free, easy to use, incredibly feature-rich, and likely will be around for awhile.

Hopefully this helps someone. 

Cheers

PS. If anyone decides to make it more aesthetically pleasing or comes up with improvements to the code, please let me know