- This topic is empty.
February 7, 2017 at 9:42 pm #251063DocParticipant
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:
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?February 7, 2017 at 11:32 pm #251227BeverleyhParticipant
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.htmlFebruary 8, 2017 at 9:14 pm #251305Chris CoyierKeymaster
Not sure if outright shrinkage is acceptable, but if it is, scaling down might be the way to go.April 19, 2017 at 6:45 am #251306DocParticipant
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.
- The forum ‘CSS’ is closed to new topics and replies.