Solved: How do I make my google calendar responsive?

porkchop_007 · ‎07-30-2018

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 · ‎07-30-2018

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>

View Best Answer >

Adam7 · ‎07-30-2018

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 · ‎07-30-2018

Thanks Adam, works a treat!

MooseTrax16 · ‎03-18-2019

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>

</div>

Adam7 · ‎03-19-2019

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 · ‎04-05-2019

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

mela914 · ‎04-05-2019

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.

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

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

</iframe>

</div>

Bernadette3 · ‎04-05-2019

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

mela914 · ‎04-06-2019

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 · ‎04-12-2019

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 · ‎01-01-2020

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

Adam7 · ‎01-01-2020

Thanks for sharing that, @Tawee.

mela914 · ‎01-03-2020

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&height=600&wkst=1&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>

</iframe>

</div>

Bernadette3 · ‎01-03-2020

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 · ‎02-01-2022

Remove this part...

</iframe>