Issues Making Embedded Google Calendar Responsive

[Maryi]

Hi,

I embedded Google calendar into a web page and used the code below to make it responsive. It views just fine on an Android phone but there are two issues on Mac devices. 1. The calendar width is cut off on an iPhone 2. The calendar continues to expand on the iPhone and iPad.

Does anyone know a solution for these issues?

I have a Coming Soon page up on the live website but could create a guest login if you need to view the calendar.

Thanks.

/* Responsive iFrame */

.responsive-iframe-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}

.responsive-iframe-container iframe,
.vresponsive-iframe-container object,
.vresponsive-iframe-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

<!-- Responsive iFrame -->
<div class="responsive-iframe-container">

<iframe src="https://www.google.com/calendar/embed?src=chadashcommunity%40gmail.com&ctz=America/Denver" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>

</div>

http://www.chadashcommunity.org/events/

[Robin]

I would try changing the width inside of your iframe code to be width="100%" instead of 800. The 800 is pixels and since it's inline, most browsers won't override it with your site's CSS. HTH

---

I do the best I can with what I’ve got. (say hey on twitter)

[David Chu]

Hi!
Quick idea: last time I did a similar move with an iFrame I just removed all styling code from the iFrame. I also removed width and height from the iFrame. That should allow your CSS to "take over".

Hope that helps,
Dave

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[Maryi]

Hi Robin and Dave,

Thanks for your suggestions but unfortunately they didn't eliminate the issues.

Robin, I left the width at 100% because I think that's better to use regardless of the issue. I used percentage on previous iterations but left it out on this one so thanks for the reminder.

Mary

[David Chu]

One last idea - try adding this to the top CSS declaration above. Again, I'm assuming no width or height figures on the iFrame. The rest of your CSS looks good to me.

max-width: 100%;

Good luck!
D

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[Maryi]

Still didn't work Dave.

I posted the issue in the Google Calendar forum and will post the solution if I figure this out.

Thanks for your help.

[David Chu]

You're welcome, Mary,
Indeed, there may be something idiosyncratic about that particular calendar code, or the context.

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[Author]

Posts