How do I make my google calendar responsive?

[porkchop_007]

Hi hoping someone can help me.

Like many others I've been frustrated that the google calendar isn't responsive and therefore doesn't resize when viewed on the mobile site

I've found the following 'how-to'

https://thomas.vanhoutte.be/miniblog/make-google-calendar-iframe-responsive/

I've added the <div> to the iFrame but I'm not sure where to add the CSS within the CSS file.

Thanks in advance

[Adam7 · Accepted solution]

You could actually add your CSS within <style> </style> tags within your Embed Code element before the opening <div> tag. Something like this:

<style>
.myIframe { /* some rules */}
</style>
<div>
<iframe class="myIframe" src="googlecalendar"></iframe>
</div>

[porkchop_007]

Thanks Adam, works a treat!

[MooseTrax16]

Hi Adam,

I hope it's okay to tag onto this thread. I pasted the following into my Embed Code element, and my calendar still cuts off half of Friday and all of Saturday on a mobile device. You can't scroll or pinch it to adjust. Can you spot what is wrong?

Nancy

<style>

.myIframe

{

position: relative; padding-bottom: 200%; height: 0; overflow: hidden;

}

.responsiveCal iframe {

position: absolute; top: 0; left: 0; width: 100%; height: 100%

}

</style>

<div>

<iframe class=”myIframe” src="https://calendar.google.com/calendar/b/1/embed?height=600&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=i..." style="border-width:0" width="800" height="600" frameborder="0" scrolling="no"></iframe>

</div>

[Adam7]

Could you post a link to the page of your site that has the code on it, @MooseTrax16? I think it would help to see it in action.

[mela914]

I need help with this too.  Calendar gets cut off on mobile. 

Below is the code I currently have embedded.  I don't really understand how to add your code.  When I added it before all of this, it looked funny and didn't quite work. Here is url where the calendar resides:  https://www.sstte.org/calendar.html

<iframe src="https://www.google.com/calendar/embed?title=Scarsdale%20Synagogue&amp;height=600&amp;wkst=1&amp;bgco..." style=" border-width:0 " width="900" height="600" frameborder="0" scrolling="no"></iframe>

[mela914]

quick update.  Found another thread and embedded this code BELOW the iframe code...and it mostly worked!!  The right most part of the dropdowns at the top (week, month, agenda) is getting cut off and there is a giant space underneath the calendar that needs to be fixed but it's a lot better than before.

<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>

[Bernadette3]

What's the link to the page with the calendar? 

[mela914]

https://www.sstte.org/calendar.html  I still have the space underneath the calendar as well as the "agenda" dropdown on the right side of page at the top of calendar is getting cut off but at least now we can see all weekdays at once.  if you can help, that would be awesome.

[Bernadette3]

Apologies, @mela914 I missed this response from you! I wouldn't be much help, unfortunately, but there's usually people on here that can assist. I see the space under the calendar, but can you also post a screenshot of the top part getting cut off? In case others are not able to replicate on the device they have. Thanks! 

[Tawee]

I try this link and it work well.
https://codepen.io/profstein/pen/ozrbPJ?__cf_chl_jschl_tk__=b97121c176da2091f4aa80335824969ab6630633...

[Adam7]

Thanks for sharing that, @Tawee.

[mela914]

not sure I know how to change my code.  This is what I have and it's still getting cut off on the right side on mobile.  This is the URL:  https://www.sstte.org/calendar.html.  I also have a lot of extra space under the calendar on desktop.

<div class="googleCalendar">
<iframe src="https://www.google.com/calendar/embed?title=Scarsdale%20Synagogue&amp;height=600&amp;wkst=1&amp;bgco..." style=" border-width:0 " width="900" height="600" frameborder="0" scrolling="no"></iframe>
<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>

[Bernadette3]

Hi @mela914 Can you also post a direct link to the page with the calendar? Is it cutoff on Apple/Android, or desktop? Thanks! 

[YWATL]

Remove this part...

<div class="responsive">

<iframe src...>

</iframe>