Need help? Check out our Support site, then


Google Calendar embed not displaying correctly on mobile (iPhone 5)

  1. Hey all, it's been a while.

    I was doing really good on my own there for a while...then this happened...and it's driving me nuts. Here's the deal. I embedded a Google Calendar into a page.

    The page displays CORRECTLY on desktop PC.

    The page displays CORRECTLY on my brother's Android phone.

    The page displays INCORRECTLY on my iPhone 5.

    To be more specific, the embed is somehow causing the other page elements to be scaled down and left justified. It's kinda difficult to describe. If you have an iPhone, please check it out by going to my blog, clicking on "Menu" and selecting "Calendar".

    See what I see? Is there any way to fix this?

    Any help would be greatly appreciated.

    Thanks!

    P.S. The problem has nothing to do with my ton of CSS. I know this because I removed ALL the CSS before and the embed STILL wasn't displaying correctly.

    The blog I need help with is bayareathrowbacktheater.com.

  2. I should also mention that I've tried both Chrome and Safari mobile browsers...as well as the WordPress iOS app.

  3. Still trying to fix the issue. No luck.

    I temporarily removed all my CSS to help reduce the clutter.

    If anybody has any ideas, I'm all ears.

    Thanks!

  4. Hi cinemunkie,

    I am able to duplicate this issue with another theme. I believe this to be a possible bug with the embed and iframe resizing within JetPack's JavaScript, but I am not 100% certain that is the cause.

    I've added a tag for staff to review.

  5. Hi allancollins23,

    Thanks for bringing the issue to the attention of the staff. Hopefully a solution isn't too far down the line.

    And thanks for duplicating the issue. It's always comforting to know you're not losing your mind, lol.

  6. The issue has been reported to our developers to fix. I'll contact you once I know more.

    Thank you.

  7. Thank you, thank you, thank you.

    Be advised that the embed was working fine just a few days before I posted here. No changes made on my end. It just stopped displaying correctly. Perhaps this'll help the developers narrow down their search.

    Thanks again!

  8. Our developers ran some tests and it seems this issue also happens on non-wordpress.com sites, which means that it must be something on Google's end. We've reported it on the Google product forums:

    https://productforums.google.com/forum/#!category-topic/calendar/report-an-issue/calendar-not-loading/safari/ios/6l0i1i7BqYI

  9. Hmm, interesting.

    Thanks so much for forwarding the issue to Google. I really appreciate the support. Hopefully a solution will be found. I imagine there's a ton of people out there with the same issue. Right?

  10. You're welcome. Yes, it's likely that many people out there have this same issue.

  11. cinemunkie & kardotim - not to pick on the developers at WordPress.com, but this issue doesn't happen with embedded Google calendars on sites outside of wordpress.com OR on sites using WordPress.org software. So I'm scratching my head trying to figure out how this is a Google issue and not a WordPress.com issue.

    cinemunikie - the calendar's iframe is ignoring the "max-width" 100%. Since I see you are using the css upgrade, here's a temporary solution until the developers can figure out what the issue is:

    Go back to Google calendar and in the "embed calendar" section click the customize link. Set the default view to AGENDA and uncheck the print icon and tabs. Set the width to 280. Copy the code and paste it on your calendar page UNDER your other calendar. Then you're going to add divs that each of your calendars go in, like so:

    <div class="big-calendar">
    <first calendar embed>
    </div>
    <div class="little-calendar">
    <second calendar embed>
    </div>

    Last step: copy this and add it at to your custom css:

    .little-calendar {
    	width: 280px;
    	max-width: 100%;
    	overflow: hidden;
    }
    
    @media (min-width: 768px) {
    	.little-calendar {
    		display: none !important;
    	}
    }
    
    @media only screen and (max-width: 767px) {
    	.big-calendar {
    		display: none !important;
    	}
    }

    except, uh oh - there's another problem. This one also happens ONLY on google calendar embeds on wordpress.com: notice that if you refresh your calendar page on an iPhone or iPad, in any browser (chrome, safari, etc..), the calendar cells will continually grow and stretch downward into infinity, (bumping down any content below it) and it is impossible to click on any of the events.

    Did I mention this ONLY happens in WordPress.com? So maybe, there's a problem with the WordPress.com plugin for the Google calendar shortcode? Possibly?

    <i>Occasionally even I make mistakes. (But very rarely.) If anyone finds conflicting information or errors in what I've written here, please let me know.</i>

  12. Hi unfunnyme,

    Thanks for the long-winded response. I really appreciate you taking the time to respond.

    You're spot on about it only being a WordPress.com issue. Not sure what I was thinking. Guess I'm becoming desperate.

    I appreciate the workaround code but prefer to wait until the issue is officially fixed...but thanks.

    Have you heard from anybody else with the same issue? Just curious.

  13. I've only seen a couple other posts about it in the forums - I don't think many WordPress.com users use the calendar shortcode - or if they do they aren't checking how the display looks on an ios mobile device.

    The workaround code I gave you has a big bonus and a reason you may want to use it regardless of the issues: on phones, only the small calendar in agenda view will display, and the larger calendar will not. The agenda view is much easier to see on a phone than the calendar grid, even if the calendar wasn't overflowing the content area. You can see it in action here: http://ilratfcc.com/calendar/. If you're on a desktop or laptop, just resize your window to a narrow phone size and see what happens.

  14. Thanks again, unfunnyme, for your input. I applied the workaround code you gave me but, in my opinion, the calendar cells continually growing and stretching downward into infinity is more of a glaring issue than the original one. But that's just me.

    A valiant effort though.

  15. Unfortuantely, the calendar embed stretching happens with or without the workaround. It only happens after a refresh. It even happens to the embedded google calendar on the WordPress.com support page. No one has a solution for that yet.

  16. UPDATE: I was wrong. (It happens...)

    The stretching behavior DOES happen outside of WordPress.com so it IS a Google issue. The good news is, the wordpress developers are a pretty sharp bunch. (I probably shouldn't have second guessed them). The bad news is, there's no telling how long Google will take to fix this, because Google doesn't have happiness engineers (that I know of) which is a shame.

    The bad news for you, cinemunkie, is that Google calendar is not "responsive" so your best bet is the workaround, which most web designers use when embedding the calendar, in order to make it conform a mobile view.

    Cheers!

  17. Update:

    What I've decided to do, for now, is display the Google Calendar in "Agenda" view on both desktop and mobile...for consistency. I also came up with a workaround to stop the calendar from spilling outside the page's frame...AND stop the calendar from stretching downward into infinity. It was simple. All I did was remove the calendar's name, which was completely unnecessary.

    Yeah, I'm happy.

    I still think an actual solution is needed though. If anybody has any ideas, I'm all ears. Thanks!

  18. This is amazing cinemunkie! Thank you! I have no idea what the calendar title had to do with making the calendar stretch but this totally worked! (I even hit refresh about 100 times to make sure!) You're awesome!

  19. unfunnyme, you're quite welcome.

Topic Closed

This topic has been closed to new replies.

About this Topic