Forums

Give help. Get help.

  • Doc
    # February 7, 2017 at 9:42 pm

    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

    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

    # February 8, 2017 at 9:14 pm

    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
    # April 19, 2017 at 6:45 am

    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.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag