responsive Google Calendar and where to put the CSS code

[jmflint]

So I found a couple of posts regarding the Google Calendar and how to make it responsive, so that it is better accessed on mobile devices.  Below is the code I'm using.

However, I have no idea where to put the CSS code (and I don't even know if this code will work, so if you have a better suggestion, let me know)!  The HTML/CSS editor doesn't appear to let me select just the page I want to enter code on; it's a giant notepad of text (I've not done CSS coding, admittedly; only HTML).  And if I try to search (for example, looking for the word "iframe"), it only brings me to the first instance of that word and doesn't let me continue the search.

If someone can point me in the right direction, I'd *really* appreciate it!!

Embed code: 

<div class="responsiveCal">

<iframe src="https://calendar.google.com/calendar/embed?src=cc82820dvhefkojbqphj3hkbl8%40group.calendar.google.co..." style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>

</div>

css code:

.responsiveCal {

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

}

.responsiveCal iframe {

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

}

[jmflint]

So I found a couple of posts regarding the Google Calendar and how to make it responsive, so that it is better accessed on mobile devices.  Below is the code I'm using.

However, I have no idea where to put the CSS code (and I don't even know if this code will work, so if you have a better suggestion, let me know)!  The HTML/CSS editor doesn't appear to let me select just the page I want to enter code on; it's a giant notepad of text (I've not done CSS coding, admittedly; only HTML).  And if I try to search (for example, looking for the word "iframe"), it only brings me to the first instance of that word and doesn't let me continue the search.

If someone can point me in the right direction, I'd *really* appreciate it!!

Embed code: 

<div class="responsiveCal">

<iframe src="https://calendar.google.com/calendar/embed?src=cc82820dvhefkojbqphj3hkbl8%40group.calendar.google.co..." style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>

</div>

css code:

.responsiveCal {

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

}

.responsiveCal iframe {

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

}

[BJ5]

You could add your CSS code to the same embed code element as your calendar. Just wrap it with style tags like this:

<style>

.responsiveCal {

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

}

.responsiveCal iframe {

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

}

</style>

[jmflint]

Thanks.  Unfortunately, that didn't work....

[Bernadette3]

Can you post to the page with the calendar? Also, what device are you testing on? From what I recall, Apple devices do not respond well to embedded calendars. 

[jmflint]

I *think* I got it (I found another code set that appears to be working, even on iOS).  here's the calendar page:

http://www.ilovelearningasl.com/calendar.html

Here's the code I used:

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

Nice! Thanks for sharing. This goes waaay over my head, but is there something specific in this code that allows the calendar to work on iOS? 

[jmflint]

Well, apparently I spoke too soon.  It worked ONCE on iOS -- I just checked it again and it is not functioning that same way now.  Sigh.  The calendar does resize to fit, which is better than it WAS, but you still can't scroll up/down like you can on a computer browser.

Sooooooo, if anyone comes across a fix for that, please post!

[Bernadette3]

Well, that's a bummer. Hopefully someone will be able to help you figure it out. I see this come up a lot on here and have even seen post on Apple forums regarding the issue. 

[BJ5]

I don't see any scrolling on desktop either. Is it supposed to scroll down? From what I can tell I see the whole calendar window on both desktop and mobile.

[learnasl]

It does scroll on desktop if you change to Week or Agenda view.  Month view (which is the default) should show the whole month (that was the issue, that it wasn't showing the entire month, on a mobile screen).