Skip to main content

Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #251063
    Doc
    Participant

    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?

    #251227
    Beverleyh
    Participant

    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

    #251305
    Chris Coyier
    Keymaster

    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.

    #251306
    Doc
    Participant

    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)
  • The forum ‘CSS’ is closed to new topics and replies.