Google Calendar is responsive but cuts off when viewed on a phone?

[CSJ]

Hi,

I am currently working on this site and am trying to embed Google Calendar (half way down the page). The Calendar is responsive in that if I change the size of the web browser, the calendar shrinks accordingly. However, when I view the page on my phone, the calendar cuts off. Any ideas on how to get this calendar to display properly on phones?

Thanks!

[Bernadette3]

Hi @CSJ Can you post a link to your calendar here? We can take a look at the mobile view. Thanks!

[CSJ]

Hi @Bernadette! Here is one of the pages on the site with the Google Calendar embed: https://draftccounselingcsj.weebly.com/webinars--training.html

And here is the embed code I am currently using: 

<iframe src="https://calendar.google.com/calendar/b/1/embed?showTitle=0&amp;showDate=0&amp;showPrint=0&amp;showTa..." style="border-width:0" width="100%" height="250" frameborder="0" scrolling="no"></iframe>

And here is the link to the Google calendar: https://calendar.google.com/calendar/embed?src=counseling.csj%40gmail.com&ctz=America%2FNew_York

Let me know if there's anything else I can provide. Thank you so much!!

[Bernadette3]

Hm.. this is what I see. The border on my end very clearly shows that it's displaying properly, but I can see from your example that it appears it is not. I wonder if there are settings on Google's end to edit what is displayed? 

[CSJ]

This is a mystery! It must be, or maybe it's something with Google and iPhones? I'm going to see if I can find something out from the Google Community and report back.

Thanks so much @Bernadette!

[Bernadette3]

You're welcome! And yes, let us know what you find out. I think you might be right that it could be only be an iOS issue. I'll also see if Adam can take a look on his phone since mine is Android. Thanks! 

[CSJ · Accepted solution]

For anyone else who has this issue, adding the following CSS above the iFrame code and div class worked for me:

<style>
iframe {
 width: 10px !important;
 min-width: 100%;
 *width: 100%;
}

.responsive {
 width: 100%;
 height: 0;
 padding-bottom: 56.25%;
 position: relative;
}

.responsive iframe {
 position: absolute;
 width: 100%;
 height: 100%;
}
</style>

<div class="responsive">

<iframe src...>

</iframe>

</div>

Solution found through this thread: https://stackoverflow.com/questions/23083462/how-to-get-an-iframe-to-be-responsive-in-ios-safari

[Bernadette3]

Thanks for sharing, @CSJ!  

[mela914]

omg.  this worked great!  thanks.  I had to embed below the iframe code though b/c otherwise I had a huge space above!

[pgepta]

this makes the calendar responsive but also creates a white space for me too. how can i remove the white space?

[Bernadette3]

Hi @pgepta Are you referring to a response on this thread? 

[joymusik]

To answer how the question of how to get rid of that strange line at the bottom of the calendar, I just took some help from above, but omitted the last half of the code.

Add the following AFTER you paste in your embedded code for the calendar:

<style>
iframe {
 width: 10px !important;
 min-width: 100%;
 *width: 100%;
}

.responsive {
 width: 100%;
 height: 0;
 padding-bottom: 56.25%;
 position: relative;
}

[Bernadette3]

Hmm.. it doesn't look cutoff on mobile for me. Can you post a screenshot?

[CSJ]

Oh really? Mybe it’s just me then? Here’s a screenshot:

So this is how it looks on Safari on my iPhone 6. Is this how it’s supposed to look? I think I expected the blue border to continue on the right side.

[Quimbly]

Any suggestions on how to make the popups responsive as well? After these changes, my popus are too wide on mobile, and require scrolling.