Making Google Calendar iframe responsive

[Doc]

I’m hoping someone here may have already fought this battle and can share their solution. In trying to embed an iframe of a Google Calendar (which isn’t responsive at the source, either), I found several similar recommendations on how to do so on a WordPress site running Genesis and a child theme. What I came up with was essentially this:

http://codepen.io/DocSheldon/pen/XpBaMm

That displays beautifully on desktop, of course, but on a mobile device, although the frame height is fine, the width runs off the side of the display.

Is this something peculiar about Google Calendar, or is there an error I’m missing in my code?

[Beverleyh]

Is this something peculiar about Google Calendar

It isn’t responsive.

Unfortunately, if the iframed site/page isn’t responsive, you can’t make it responsive by modifying the CSS of your own site.

What folks seem to be doing around the web as a workaround is changing the view so that the full calendar is shown on desktop, while the agenda view is shown on mobile. This is done via 2 iframes that are hidden or made visible using media queries depending on screen size https://answers.squarespace.com/questions/54774/how-to-embed-a-google-calendar-in-a-responsive-way.html

[Chris Coyier]

You might wanna play with the concepts in this article too: https://css-tricks.com/scaled-proportional-blocks-with-css-and-javascript/

Not sure if outright shrinkage is acceptable, but if it is, scaling down might be the way to go.

[Doc]

I found the problem, and it’s working properly now. I made a stupid mistake. Originally, I had called the class “.calendar-container” in both the CSS and HTML. Someone pointed out the error of the “.” and instead of just removing the “.” from the HTML, I removed it from both. When I realized that, putting it back in the CSS fixed it.

Thanks for the responses, everyone.

[Author]

Posts